[codeplayer]当 iframe 内容使用 javascript 从 textarea 动态加载时，如何在 iframe 中查找元素

Question

作为我的一个挑战，我决定做一个像 jsfiddle 这样的小代码播放器，我已经完成了所有的工作，但是当我尝试执行 JS 时，当我尝试像这样调用 iframe 中的元素时，我的问题就来了:

document.getElementById("hola").innerHTML="nohola";

它只是说：

TypeError: document.getElementById(...) is null

有现场演示：jsfiddle.net

如何将 js 注入 iframe 并调用其中的元素？

Answer 1

问题是您的 script 标记是由主文档的 document 对象创建的。

var script = document.createElement('script');

这将使其中的 javascript 作用于主文档。您必须使用 iframe 的 document 对象创建它，这样 javascript 的范围将限定为 iframe.

您可以像这样通过 contentWindow.document 属性访问 iframe 文档：

Check this fiddle

function runJs() {
      var iframe = document.getElementById('resultIframe');
      var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
      var body = $('body', frameDoc);
      var code = $('#codeJs').find('textarea').val();
      var script = frameDoc.createElement("script");           // not document.createElement('script');
      script.setAttribute("type", "text/javascript");
      script.textContent = code; 
      body[0].appendChild(script); 
}

另见这些答案

getElementById from iframe
Inject javascript in local scope of iframe

[codeplayer]当 iframe 内容使用 javascript 从 textarea 动态加载时，如何在 iframe 中查找元素

[codeplayer]How to find element inside of an iframe when the iframe content was dynamic loaded with javascript from a textarea

html

javascript

iframe

jquery