时间戳

首页 > 解决方案 > React - 访问内联创建的 iframe 元素

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

问题描述

我有一个 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

标签： javascripthtmlreactjsiframesame-origin-policy

解决方案

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

推荐阅读