1

我有一个 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 在自己的范围内运行!?

4

2 回答 2

3

因为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/

于 2012-05-01T17:07:36.120 回答
0

问题是你在你的 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>";
于 2012-05-01T17:13:43.643 回答