动态加载到 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代码”，但它实际上在父级的div中获取了id为“test”的html，所以它没有引用自己。我在这个 fiddle 中展示了这个:http://jsfiddle.net/BNG4n/

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

Answer 1

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

您可以尝试创建一个脚本元素并将其附加到 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/