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

问题描述 投票:0回答:1

我有一个iframe,我正在尝试访问它的textarea并添加一个侦听器:

    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

javascript html reactjs iframe same-origin-policy
1个回答
0
投票

srcdoc表示其来源相同,但是由于以下两个原因,您的代码无法正常工作:

  1. 确实,当componentDidMount运行时,这意味着iframe已插入dom,但这并不意味着iframe本身已被加载,因此当执行以下代码时,它将返回null
iframeDoc.contentWindow.document.getElementById("some-textarea")
  1. let textArea = iframeDoc.contentWindow.document.getElementById("some-textarea")[0]
    

通过id获取元素将返回元素本身,因此[0]将返回未定义。

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

这里是正在运行的代码和框https://codesandbox.io/s/funny-turing-25wn9?file=/src/App.js

© www.soinside.com 2019 - 2024. All rights reserved.