Question

我有以下iFrame：

<div id="sandbox-inner">
    <iframe sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts" frameborder="0" name="Output " id="output" src="JavaScript:''"></iframe>
</div>

当用户点击运行他们的代码时，它会在此iframe中成功注入javascript。但是，它实际上在整个窗口中运行它，而不仅仅是iframe。所以基本上如果我添加一个类＆＃34;测试＆＃34;到iframe外面的一个元素，然后在一个内部，然后在iframe的头部内注入以下内容......

$(function() {
      $('.test').css({ background: "blue" });
});

它也会影响我在iframe之外的元素，我真的不想要它。我需要iFrame成为一个完全独立的环境。这就是我目前正在注入javascript：

$('#runGuestCode').on("click", function () {

        var js = $('#js-input').val(),           
            iframe = $("#output"),
            iframeHead = iframe.contents().find("head").first(),
            frame = document.getElementById("output"),
            scriptTag = '<script>' + js + '<\/script>';

        $('#output').contents().find("head").append(scriptTag);
    });

非常感谢

更新＃1

javascript取自textarea＃js-input，这是用户输入的内容。然后将其附加到iframe的头部，但当前相对于父文档而不是iframe文档运行。

Answer 1

您可以按照以下方式执行此操作，它不会影响您当前页面元素仅适用于iframe元素： -

var iframe = $('iframe');
$(element,  iframe.contents()).css({'background':'blue'});

<强> Working Fiddle

展示用户在iframe中输入的javascript代码：

$('#submit1').click(function (e) {
    e.preventDefault();
    var myIframe = document.getElementById("resultFrame");
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.innerHTML = $("#textarea1").val();
    myIframe.contentWindow.document.head.appendChild(s);
});

<强> Working Fiddle with Javascript Output in iframe

如何仅相对于该帧而不是整个窗口执行javascript？

1 个答案: