iFrame javascript 影响父 DOM
Posted
技术标签:
【中文标题】iFrame javascript 影响父 DOM【英文标题】：iFrame javascript affecting parent DOM 【发布时间】：2015-03-31 20:38:34 【问题描述】：我将内联 javascript 注入到预先存在的框架中。此 javascript 根本不会影响它所在的框架，而不是包含该框架的父 DOM。
我有一个 JSFiddle 来演示我的问题：http://jsfiddle.net/vfspadgt/
HTML
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
<div class=".dropdown">
<p>hi2</p>
</div>
JavaScript
var preview = $("#preview").contents();
var css = "<style type='text/css'></style>";
var html = "<p>hi1</p>";
preview.find("head").html(css);
var script = document.createElement("script");
script.type = "text/javascript";
script.text = "$('p').remove();";
preview.find("head").append(script);
preview.find("body").html(html);
结果
hi1 在 iFrame 中，hi2 在父 DOM 中。然而，注入 iFrame 的 javascript 会删除它不应该访问的 hi2，也不应该访问它用来删除它的 jQuery。
感谢您的帮助。
【问题讨论】：
您需要获取 iFrame 的contentDocument，并在该范围内创建元素，而不是使用父窗口中的 document。
我改变了 document.createElement("script");到 window.frames[0].document.createElement("script");但这并没有什么不同。我做错了吗？
【参考方案1】：
我自己解决了这个问题。问题在于将脚本附加到 iFrame 中并不足以使其正常工作。要使脚本仅在 iFrames DOM 中执行，就是直接写入它。
我还使用父文档创建了脚本元素，从而为它们建立了关系。
$("#btnRun").click(function(event)
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() " + script + "</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
);
【讨论】：
以上是关于iFrame javascript 影响父 DOM的主要内容，如果未能解决你的问题，请参考以下文章