时间戳

首页 > 解决方案 > 在 iFrame 中定义 customElements 会引发“DOMException：不支持操作”。为什么？

javascript - 在 iFrame 中定义 customElements 会引发“DOMException：不支持操作”。为什么？

问题描述

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

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

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

然后将定义移动到 iFrame 后，我得到DOMException: operation not supported. 该功能存在，但不受支持。

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

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

标签： javascriptiframecustom-element

解决方案

如果要将主 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>标记中的转义字符。

推荐阅读