如何防止 iframe 中的上下文菜单？答案

【问题标题】：How to prevent context menu in an iframe?如何防止 iframe 中的上下文菜单？
【发布时间】：2017-12-22 15:00:01
【问题描述】：

我试图阻止浏览器的上下文菜单在每个元素“iframe”上的“右键单击”事件中显示，但它不起作用 - 上下文菜单仍在工作
这是我的代码：

$(document).ready(function () {
       $("iframe").each(function(){
           $(this).on("contextmenu",function(e){
               e.preventDefault(); //return false;
           });
       });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe src="http://www.google.com"></iframe>

【问题讨论】：

看到这个答案：stackoverflow.com/a/11224303/2112538
试了一下，找到了这个答案` $(this).contents().find("body").mousedown(function(event) { if(event.which === 3) { return false; } });` 但它不起作用 :( 请帮忙

标签： jquery html

【解决方案1】：

浏览器中的每个窗口、选项卡和 iframe 都是不同的安全上下文，并且每个都被沙盒化。这是为了防止一个页面能够篡改另一个页面。

因此，对 iframe 的样式、脚本和脚本访问仅限于 iframe 元素本身，而不是其任何内容。同样，出于同样的安全原因，iframe 也无法访问其父级。

在 iframe 中阻止上下文菜单的唯一方法是在 iframe 本身中加载上下文菜单阻止脚本。如果您无权访问 iframe 的内容，那么这是不可能的。如果是这样，您可能会干扰第三方网站在该 iframe 中的运行方式。

【讨论】：

【解决方案2】：

我创建了一个JSFiddle 来尝试执行您正在寻找的操作，但您想要执行的操作似乎在 iframe 标记上是不可能的。浏览器将为 iframe 强制执行特定规则，甚至覆盖 Web 开发人员的 CSS 和 JS 编程代码。

.contextmenu() 方法的 jQuery 示例确实适用于 div 标签。

在我的JSFiddle 演示中，似乎右键菜单仅在浅绿色 div 标签上被阻止，而在 iframe 标签上则没有。

（即使试图将 iframe 包裹在 div 标签内并为 div 标签提供纯色背景色，也会导致浏览器强制 iframe 的 z-index 弹出到 div 标签的 z-index 之上。因此弹出彩色 div 并覆盖开发人员告诉浏览器执行的操作。这是为了防止人们将 iframe 隐藏在其他内容下方并加载广告或脚本，而用户无法看到或访问隐藏的内容。）

您可能必须尝试从 iframe 的 src 文件中加载类似的内容：

<script>
    $(function() {
        $("body").contextmenu(function(e) {
            e.preventDefault();
        });
    });
</script>

它可以在 body 标签上工作，但我还没有验证它是否可以工作。如果它确实有效，那么它只适用于您的网页，这些网页加载到 iframe 标记中，而不适用于其他人的网页。

抱歉，在这种情况下您可能无法做您想做的事情。随意玩我的JSFiddle。也许您可以找到一种解决方法，这对您来说是可以接受的。 :)

【讨论】：

所以我无法阻止 iframe 上的上下文菜单 :(（我已经在主元素 'body' 上阻止了它，但它不会阻止 iframe 卸载上下文菜单）

【解决方案3】：

如果您使用的是 jquery。将此代码插入到您的 iframe 页面中，就在 body 标记结束之前：

<script>
    $("html").contextmenu(function(e) {
       e.preventDefault();
    });
</script>

这将完全禁用您的 iframe 上下文菜单。在 chrome 浏览器上测试。

【讨论】：