Question

我正在将内联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。

感谢您的帮助。

Answer 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();
});

影响父DOM的iFrame javascript

1 个答案: