javascript - [codeplayer]当 iframe 内容是使用 javascript 从文本区域动态加载时，如何在 iframe 中查找元素

Question

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

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

它只是说:

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

有一个现场演示:jsfiddle.net

如何将 js 注入(inject) 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