javascript - 动态加载到 iframe 中的 JavaScript 在父范围内运行

Question

我有一个 iframe，我使用以下代码动态地将一些 html+javascript 加载到其中：

var allMyCode = "<div id='test'>html code</div> <script type='text/javascript'>alert(document.getElementById('test').innerHTML);<\/script>";
$("#myFrame").contents().find("body").html(allMyCode);

问题是我希望这能提醒文本“html 代码”，但它实际上获取了 id 为“test”的父级 div 中的 html，因此它没有引用自身。我在这个小提琴中展示了这个：http: //jsfiddle.net/BNG4n/

为什么要这样做，我怎样才能让 JavaScript 在自己的范围内运行！？

Answer 1

因为jQuery在设置 iframe 的 body 元素的 html 之前执行 script 元素，它总是在父范围内。

您可以尝试创建一个脚本元素并将其附加到 iframe 的正文中，它将按预期工作。

像这样的东西。

var allMyCode = "<div id='test'>html code</div>";
$("#myFrame").contents().find("body").html(allMyCode);
var el = document.createElement("script");
el.setAttribute("type","text/javascript");
el.innerHTML = "alert(document.getElementById('test').innerHTML);";
$("#myFrame").contents().find("body")[0].appendChild(el);

工作演示 - http://jsfiddle.net/BNG4n/1/

Answer 2

问题是你在你的 js 中指的是文档，就目前的 javascript 而言，它仍然指的是父文档。

相反，您必须先找到框架（document.getElementById（'myFrame'）），然后从框架（contentWindow.document）中的测试ID中找到HTML内容，如下所示：

var allMyCode = "<div id='test'>html code</div> <script type='text/javascript'>alert(document.getElementById('myFrame').contentWindow.document.getElementById('test').innerHTML);<\/script>";