JavaScript的动态加载到父范围iframe中运行(JavaScript dynamicall

2019-09-28 01:28发布

我有一个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代码”,但它实际上得到HTML在div与“测试”的id父,所以它不是引用本身。 我已经在这个拨弄出这一点: 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/



Answer 2:

问题是你指的是文件在你的js仍然是指父文档尽可能的JavaScript关注的是这一点。

相反,你必须先找到帧(的document.getElementById(“myFrame”)),然后找到从测试ID内的帧(contentWindow.document)像这样的HTML内容:

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


文章来源: JavaScript dynamically loaded into iframe runs in parent scope