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

问题是我希望这可以提醒文字＆＃h; html代码＆＃39;但它实际上获取了父级div中的html，其id为＆＃39; test＆＃39;，因此它不会引用自身。我已经在这个小提琴中展示了这一点：http://jsfiddle.net/BNG4n/

为什么要这样做，如何让JavaScript在自己的范围内运行！？

Answer 1

因为jQuery在设置iframe的body元素的html之前执行了script元素，而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/

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>";

动态加载到iframe中的JavaScript在父作用域中运行

2 个答案: