我有一个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
srcdoc表示其来源相同,但是由于以下两个原因,您的代码无法正常工作:
iframeDoc.contentWindow.document.getElementById("some-textarea")
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