如何将 jQuery 事件附加到带有沙箱的 iframe？答案

【问题标题】：How to append jQuery events to an iframe with sandbox?如何将 jQuery 事件附加到带有沙箱的 iframe？
【发布时间】：2013-06-19 16:21:33
【问题描述】：

我有一个加载本地页面（代理）的 iframe：我需要不执行这些页面中的 Javascript（我已经在服务器上执行它，在客户端再次执行它会导致双重执行，因此不好） .

我可以通过使用新的“沙盒”参数来实现这一点。

问题是我需要能够将事件从主窗口添加到 iframe 内容。这似乎不起作用。

我用jsfiddle准备了一个例子。

<iframe 
id='iframe1' 
sandbox='allow-top-navigation allow-same-origin allow-forms'
srcdoc='<html><head></head><body><div id="test">iframe1</div><script>document.body.style.backgroundColor="yellow"</script></body></html>'>
</iframe>

<iframe
id='iframe2'
srcdoc='<html><head></head><body><div id="test">iframe2</div><script>document.body.style.backgroundColor="yellow"</script></body></html>'>
</iframe>

$('iframe').load(function() {
    var id = this.id;

    //this works in both iframes
    $(this).contents().find("#test").html(id+" says gnek!");

    //I need this to work for iframe 1, too.
    $(this).contents().on("click", function(event) { 
        alert("clicked "+id);
    });
});

如您所见，frame1 被沙盒化，不执行内部 JS（背景未变黄）。但是，我可以在父窗口中使用 JS 更改其内容。

有没有办法添加事件呢？如果没有，将页面加载到 iframe 中而不让它执行其 javascript 的最佳方法是什么？

【问题讨论】：

标签： jquery iframe jquery-events sandbox

【解决方案1】：

将事件附加到沙盒 iframe 的内容与从 iframe 运行 javascript 相同，因此无法完成。

我通过在文档的<head> 中添加以下内容解决了停止 JS 执行的问题：

<script>Function.prototype.call = Function.prototype.apply = function(){};</script>

编辑：这似乎还不够。我最终决定简单地从文档中删除<script>blocks。

【讨论】：

如此聪明的解决方案！不错。
很遗憾，这似乎还不够。看看这个jsfiddle。
哎呀，你是对的。不知道我在测试中怎么没有注意到这一点。如果只有另一种方式来附加事件。
我不确定为什么它实际上不起作用。需要解释一下吗？
我想我明白为什么会这样了。看看这个小提琴：jsfiddle.net/NB2wX/5 至于这对解决方案意味着什么……我不确定。除了弄清楚如何从 iframe 的 HTML 中去除 JS 之外，可能没有其他方法。这很难。