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 NewFrame extends HTMLElement {
  constructor() {
    super()
    console.log( 'created' ) 
    this.attachShadow( { mode: 'open' } )
        .innerHTML = "<iframe></iframe>"
  }
  connectedCallback() {
    setTimeout( () =>
      this.shadowRoot.querySelector( 'iframe' ).contentDocument.body.innerHTML = this.innerHTML
    )
  }
}
customElements.define( 'new-frame', NewFrame )

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

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

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

创建自定义节点以扩展HTMLIFrameElement

1 个答案: