时间戳

首页 > 解决方案 > 在 iframe 中创建自定义元素

javascript - 在 iframe 中创建自定义元素

问题描述

由于 html 导入还没有得到很好的支持（例如，Firefox 没有计划这样做），我试图模仿它在通过 iframe 导入自定义元素时的使用。

我尝试这样做的方法是在 iframe 中加载一个脚本，该脚本在顶部浏览上下文中定义自定义元素；之后甚至可以从文档中删除 iframe。我尝试这样做的原因是因为我想根据我在客户端获得的信息动态定义自定义元素；并且那些自定义元素使用要在 shadow DOM 中使用的模板。

我更喜欢使用模板而不是在脚本中构建 shadow DOM 以获得干净的代码；这就是为什么我想用带有所有模板的 iframe 来模拟导入功能，而不是仅仅加载构建影子 DOM 的脚本。

但是，我尝试过的方式不起作用（在 google chrome 和 firefox 中测试）：

// iframe.js

class XAElement extends HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

是否允许在 iframe 中定义顶部浏览上下文的自定义元素？

注意：文件 iframe.html 是加载此脚本的任何 html 文件；并且文件 index.html（发生错误的地方）是加载 iframe iframe.html 的任何文件。

注2：我得到的错误是 afer super()；但是，如果我注释最后一行（我打算在其中定义自定义元素），则不会发生错误。

标签： javascripthtmliframecustom-element

解决方案

在多次修改脚本进行测试后，我意识到这HTMLElement与top.HTMLElement. 这就是为什么继承 fromHTMLElement不能用于定义自定义元素的原因，因为它只允许从HTMLElement定义自定义元素的浏览上下文中继承。

然后，将脚本修改为：

// iframe.js

class XAElement extends top.HTMLElement{
 constructor(){
  super()
  // Any customization here
 }
 // Any other methods for functionality
}
top.customElements.define('x-a', XAElement)

它最终工作。

我会这样做是因为，在定义自定义元素并将所需的模板内容保存在构造函数类中（作为属性，可以在定义自定义元素之前完成）之后，我可以删除 iframe。这样，我只需要加载 iframe；等待满足这些要求；并删除 iframe 以（我认为）恢复创建嵌套浏览器内容的性能影响。

注意：如果在加载要使用的模板之前执行脚本，则将模板内容保存在构造函数中应该放在加载事件侦听器中。

版：

我忘了测试如果我在发布答案时删除 iframe 会发生什么。发生的事情是它停止工作；这就是为什么我接受另一个答案。

推荐阅读