logo标签列表

如何禁用iframe上的鼠标右键点击

javascriptjqueryhtmliframemodel-view-controller
8
在MVC Web应用程序中，我有一个在IFrame中显示的文档内容。该内容不应被复制和打印。我尝试使用两个函数style="pointer-events:none;" oncontextmenu="return false"禁用右键单击IFrame，这很好地起到了作用。但是，在右键单击时，弹出窗口显示“查看框架源”、“查看源”。如何限制这个呢？此外，如何限制屏幕截图选项。我知道有其他工具可以捕获数据。但客户想要限制屏幕截图选项。
<script lang=JavaScript>
    function clickIE() {
        if (document.all) {
            return false;
        }
    }
    function clickNS(e) {
        if (document.layers || (document.getElementById && !document.all)) {
            if (e.which == 2 || e.which == 3) {
                return false;
            }
        }
    }
    if (document.layers) {
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown = clickNS;`enter code here`
    }
    else {
        document.onmouseup = clickNS;
        document.oncontextmenu = clickIE;
    }
    document.oncontextmenu = new Function("return false")


<body   oncontextmenu="return false" onkeydown="if ((arguments[0] || window.event).ctrlKey) return false" >
<div  id="div1" style="background-color:Red; height:120px">


  <iframe id="id1" src="" name="I1" scrolling="no" height="100%" width="100%" marginwidth ="0" marginheight="0" onload="disableContextMenu();" style="pointer-events:none;"  /> 



</div>

请帮忙！非常感谢！

6
如果用户能看到内容，你就无法阻止他复制。我的意思是完全无法阻止。 - Frederik.L
哦，我还希望有一个迂回的解决方案 :-). 我们能限制iframe内容的打印屏幕选项吗？ - Lax
2
我手机上有相机。哈哈 - jay temp
如果你的意思是想阻止他们截屏，那么不，你不能。你能做的最好的事情就是通过禁用文本选择、右键点击和在打印时从DOM中删除元素（仅限IE）来使它变得非常困难。 - MarshallOfSound
1
你唯一可以防止屏幕截图的方法就是根本不让用户看到内容。所以完全放弃这个项目，就没有屏幕截图的问题了！耶！;) - misterManSam
显示剩余7条评论
6个回答
8
为了禁用右键菜单，您可以使用以下代码片段：
document.oncontextmenu = function() { 
    return false; 
};

我做了一个JSFiddle，展示了这个效果。

如果我在开发工具中禁用JavaScript会怎样？ - Frederik.L
1
然后您将能够再次获得右键菜单。我认为没有（也希望没有）禁用用户浏览器功能的方法。 - jollelj
3
如何在 iFrame 中禁用？ - CDT
2
这对于iFrame不起作用。请看下面由我给出的答案。 - Muthukumar
3
这对我很有效：最初的回答。
window.frames["your_iframe_id"].contentDocument.oncontextmenu = function(){
 return false; 
};
给我带来了魔力！ - John Chidi
2
你的问题有点混淆，标题是关于右键单击的，但问题的主体是关于复制粘贴和使用打印屏幕按钮的。虽然你可以通过右键单击按钮做一些事情（已由其他帖子回答并得到充分记录），但通常你的问题是如何防止人们访问代码/内容或打印你的内容。
这是不可能的。虽然你可以使某些用户更加棘手，但对那些足够坚定的人来说，它永远不会成功。
首先，即使你（以某种方式）禁用了键盘上的打印屏幕按钮，仍然有许多屏幕捕捉程序...而且我看不到如何从网站代码的限制范围内检测到另一个程序正在执行此操作。
任何JavaScript解决方案都可能失败，他们可以关闭JavaScript。
即使你设法阻止某人查看源代码并复制HTML，某人也可以直接从网站中抓取内容。
我有一个朋友是平面设计师，他想要做到这一点（在这种情况下禁止人们复制图像）。我告诉他不要费心，如果他们想要获取你放入公共领域的内容，他们就会这样做。水印可能有所帮助，但只在某些情况下。就个人而言，我会放弃这个任务，接受它，并专注于更有趣的任务。
2
在我看来，这个问题是一个“不是一个真正的问题”的候选者，并且应该被关闭，就那么简单。我还要补充说，这些行为屏蔽解决方案对用户更加恼人，用户不会受到诱惑而回来，也没有任何一种方式可以防止复制。十多年前，互联网上充斥着很多烂脚本，每当你想与页面进行交互时，它们都会说“不要复制！！！”。最好的做法是告诉客户无法完成，部分地完成可能会伤害他的受众。 - Frederik.L
1

1.) 使用jquery禁用在iFrame中的右键单击

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
// Function to block the right click in the iFrame
<script type="text/jscript">
function injectJS(){    
    var frame =  $('iframe');
    var contents =  frame.contents();
    var body = contents.find('body').attr("oncontextmenu", "return false");
    var body = contents.find('body').append('<div>New Div</div>');    
}
</script>

在 iFrame 中调用 "injectJS()" 函数。
<iframe id="myiframe" width="528" height="473"  onload="injectJS()"></iframe>

2.) 禁用网页中的右键菜单。

仅使用javascript实现。

document.addEventListener('contextmenu', event => event.preventDefault());

以下是jQuery的一个示例（注意：按下鼠标右键将触发三个事件：mousedown事件、contextmenu事件和mouseup事件）

// With jQuery
$(document).on({
"contextmenu": function(e) {
    console.log("ctx menu button:", e.which); 
    // Stop the context menu
    e.preventDefault();
},
"mousedown": function(e) { 
    console.log("normal mouse down:", e.which); 
},
"mouseup": function(e) { 
    console.log("normal mouse up:", e.which); 
} 
});

如果您有任何问题，请在下面留言。
无法工作。它没有像您打算的那样在iframe的<body>标签上添加'oncontextmenu="false"'。 - Daniel Muñoz Parsapoormoghadam
1

我们不能仅仅在iframe上禁用右键点击。因为iframe的内容是从另一个源加载的，所以我们的代码不会在其上起作用。这里我找到了唯一可行的解决方案。

<html>
<head>
<title>Disable Context Menu</title>
<script type="text/jscript">
  function disableContextMenu()
  {
    window.frames["fraDisabled"].document.oncontextmenu = function(){alert("No way!"); return false;};   
    // Or use this
    // document.getElementById("fraDisabled").contentWindow.document.oncontextmenu = function(){alert("No way!"); return false;};;    
  }  
</script>
</head>
<body bgcolor="#FFFFFF" onload="disableContextMenu();" oncontextmenu="return false">
<iframe id="fraDisabled" width="528" height="473" src="local_file.html"></iframe>
<div style="width:528px;height:473px;background-color:transparent;position:absolute;top:0px;">
</body>
</html>
0
window.frames["your_iframe_id"].document.oncontextmenu = function(){ return false; };
我尝试使用相同的代码行，但它不起作用了。复制、打印选项现在没有显示出来。但是“查看源代码”、“查看框架源代码”和“另存为”选项仍然可见。有没有办法限制这个..谢谢 - Lax
客户要求这个功能，所以我提出了这个问题。不管怎样，非常感谢大家抽出时间回复。 - Lax
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接