[代码播放器]当 iframe 内容从文本区域使用 JavaScript 动态加载时，如何在 iframe 内查找元素

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

本文关键字：iframe 加载 动态 元素 JavaScript 查找 播放器 代码 区域 文本      更新时间：2023-09-26

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

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

它只是说：

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

有一个现场演示：jsfiddle.net

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

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

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

这将使其中的 javascript 范围限定为主文档。你必须使用iframe的document对象来创建它，以便javascript的范围将限定为iframe。

可以通过 contentWindow.document 属性访问iframe文档，如下所示：

检查这个小提琴

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); 
}

另请参阅这些答案

  • 来自 iframe 的 getElementById

  • 在 iframe 的本地范围内注入 JavaScript

相关文章：