创建自定义节点以扩展 HTMLIFrameElement

Question

是否可以创建一个自定义元素，例如：“”，并且这个新元素将具有 iframe 元素的所有功能？（它自己的文档/窗口对象等等......）？

Answer 1

扩展 <iframe>

要扩展标准 HTML 元素，您必须{ extends: "element" }在customElements.define()方法中使用：

class MyFrame extends HTMLIFrameElement {
    constructor () {
        super()
        console.log( 'created')
    }
}
customElements.define( 'my-frame', MyFrame, { extends: 'iframe' } )

然后使用该is="custom-element"属性创建扩展元素：

<iframe is='my-frame'></iframe>

然后您可以将其用作标准<iframe>并添加您的自定义功能。

定义一个新的 HTML 标签

Alternaltey，如果您想要一个新的标签名称，请创建一个自治的自定义元素（派生自HTMLElement），其中包含一个标准<iframe>元素：

class MyFrame extends HTMLIFrameElement {
    constructor () {
        super()
        console.log( 'created')
    }
}
customElements.define( 'my-frame', MyFrame, { extends: 'iframe' } )

在此示例中，自定义元素将使用 的内容<new-frame>来填充<iframe>文档。

<new-frame>Hello world !</new-frame>

此解决方案的缺点是您的新元素不会充当<iframe>. 您必须为要转发到<iframe>内部的所有功能定义一些自定义方法。