在iFrame中定义customElements会抛出"DOMException:操作不受支持“。为什么？

Question

我想将自定义元素定义添加到我的iFrame中。

在主浏览器窗口中，定义工作得很好：

customElements.define("custom-tag", customTag)

然后，在将定义移动到iFrame之后，我得到了DOMException: operation not supported。该函数在那里，但不受支持。

iFrame.contentWindow.customElements.define("custom-tag", customTag);

这有什么特别的原因吗？在iFrame中定义自定义标记是被设计为阻止的并且无法解决，还是应该在我的iFrame配置中包含一些东西来允许这种“不安全”行为？

Answer 1

如果要将主HTML文档中的自定义元素注入到<iframe>元素中，可以将其添加到<script>元素中。

例如，通过srcdoc属性：

​

frame.srcdoc = `
  <script>
    class customTag extends HTMLElement {
        constructor() {
    	    super()
            this.attachShadow( { mode: 'open' } )
                .innerHTML = "Hello World"
        }
    } 
    customElements.define( 'custom-tag', customTag )
  <\/script>
  <custom-tag></custom-tag>
`

<iframe id=frame></iframe>

​

注意结束</script>标记中的转义字符\。