React - 访问内联创建的 iframe 元素

Question

我有一个 iframe，我正在尝试访问它的文本区域并添加一个侦听器：

    onIframeRef = (node) => {
       this.Iframe = node;
    };

  componentDidMount() {
      let iframeDoc = this.Iframe.contentDocument || this.Iframe.contentWindow.document;
      let textArea = iframeDoc.contentWindow.document.getElementById("some-textarea")[0];
      textArea.addEventListener("input", this.onInput);
   }

    render() {
            return <div>
                 <iframe
                  ref={this.onIframeRef}
                  sandbox="allow-same-origin"
                  srcdoc='<html><body><textarea id="some-textarea"></textarea></body></html>'
                  ></iframe>
             </div> 
    }

我对设置 srcdoc 是否意味着代码同源感到困惑，因为代码不起作用并且 this.Iframe 既没有 contentDocument 也没有 contentWindow

Answer 1

srcdoc 表示同源，但是你的代码不工作有以下两个原因：

确实是当componentDidMount 运行s 表示iframe已经被插入dom，但是并不意味着iframe本身已经被加载了，所以当下面的代码执行它会 return null

iframeDoc.contentWindow.document.getElementById("some-textarea")

let textArea = iframeDoc.contentWindow.document.getElementById("some-textarea")[0]

通过 id return 获取元素本身，因此 [0] 将 return 未定义。

为了使您的代码正常工作，您应该在 iframe 上监听加载事件，然后运行在该事件监听器中监听您的代码（以确保 iframe dom 本身已被加载）

这里有一个运行ning codesandbox https://codesandbox.io/s/funny-turing-25wn9?file=/src/App.js

React - 访问内联创建的 iframe 元素

React - Accessing inline created iframe elements

javascript

html

reactjs

iframe

same-origin-policy