Javascript 如何在 Chrome 的自助服务终端模式下禁用右键单击/长按时的上下文菜单？

How to disable context menu on right click/long touch in a kiosk mode of Chrome?

提问by korsun

We are working on the software for a museum. There are several interactive kiosks with touch screen running on Windows 8.1 which are connected into local network. No keyboard, no mouse. The server with Apache on it contains several local websites. Each kiosk runs a copy of Google Chrome in a kiosk mode. So, we have some kind of local web applications which provide a museum visitor with information.

我们正在为博物馆开发软件。有几个带触摸屏的交互式信息亭在 Windows 8.1 上运行，它们连接到本地网络。没有键盘，没有鼠标。装有 Apache 的服务器包含多个本地网站。每个自助服务终端都以自助服务终端模式运行 Google Chrome 的副本。因此，我们有一些本地网络应用程序可以为博物馆参观者提供信息。

Now, the problem. If a visitor does long touch on screen it works like an analogue of right click. Context menu appears. We don't want it at all. I've added "oncontextmenu = return false" into the body tag and it helped. But. We have a couple of external websites running in iframes (the museum has a connection to Internet). And context menu doesappear on iframes. AFAIK, there is no way to disable it using javascript.

现在，问题。如果访问者在屏幕上长时间触摸，它的工作方式类似于右键单击。出现上下文菜单。我们根本不想要它。我在 body 标签中添加了“oncontextmenu = return false”，它有帮助。但。我们有几个在 iframe 中运行的外部网站（博物馆有互联网连接）。并且上下文菜单确实出现在 iframe 上。AFAIK，无法使用 javascript 禁用它。

Our system engineer got a software which completely disables right click in Windows. Anywhere including Chrome. But. It works for a mouse. And as for touches... well, it disables touch events anywhere besidesChrome. Maybe Chrome has its own touch events handler, I don't know.

我们的系统工程师得到了一个在 Windows 中完全禁用右键单击的软件。任何地方，包括 Chrome。但。它适用于鼠标。至于触摸……好吧，它会禁用Chrome之外的任何地方的触摸事件。也许 Chrome 有自己的触摸事件处理程序，我不知道。

So, after all. We need to get rid off context menu on iframes on right click/long touch in a kiosk mode of Chrome. Please give me some advice.

所以，毕竟。我们需要在 Chrome 的 kiosk 模式下通过右键单击/长按来摆脱 iframe 上的上下文菜单。请给我一些建议。

回答by apsillers

I assume you're displaying a plain http://...(or possibly https://...or file://...) Web page on your kiosk. If you're actually showing an app (i.e., chrome-extension://...), then this strategy will not work.

我假设您正在您的信息亭上显示一个普通http://...（或可能https://...或file://...）网页。如果您实际上是在展示应用程序（即chrome-extension://...），则此策略将不起作用。

A Chrome extension that injects window.addEventListener("contextmenu", function(e) { e.preventDefault(); })into every browsing context would probably do the trick to block context menus on iframes.

注入window.addEventListener("contextmenu", function(e) { e.preventDefault(); })每个浏览上下文的Chrome 扩展程序可能会阻止 iframe 上的上下文菜单。

manifest.json:

清单.json：

{
    "manifest_version": 2,
    "name": "Context Menu Blocker",
    "version": "1.0",
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["contextblocker.js"],
        "all_frames": true,
        "match_about_blank": true
      }
    ]
}

contextblocker.js:

contextblocker.js：

window.addEventListener("contextmenu", function(e) { e.preventDefault(); })

Simply create a folder and place the two files inside. Then, go to chrome://extensions/, check the Developer Modebox. Finally, click Load unpacked extension...and select the folder you just created.

只需创建一个文件夹并将两个文件放入其中。然后，转到chrome://extensions/，选中该Developer Mode框。最后，单击Load unpacked extension...并选择您刚刚创建的文件夹。

This should prevent the context menu from appearing in anywhere extension content scripts are allowed to run, include any page loaded inside of an iframe. There are few notable points where it fails:

这应该可以防止上下文菜单出现在允许运行扩展内容脚本的任何地方，包括在 iframe 内加载的任何页面。它失败的几个值得注意的地方：

• Extensions are not allowed to run on chrome://or chrome-extension://pages, or on Google's Web Store. If your kiosk is displaying an app, this whole strategy won't work, because this extension won't be able to access iframes inside of another app or extension (even if the source of the iframe is an origin that it would normally have permission to access).
• If you navigate directly to about:blank, the content script will not run and the context menu can appear. (If about:blankis loaded in an iframe, however, the block will work correctly.)
• If an iframe has a sandboxattribute that does not include the allow-scriptspermission, then the extension cannot block context menus from that iframe.

• 扩展不允许运行chrome://或chrome-extension://网页，或谷歌的网络商店。如果您的信息亭正在显示一个应用程序，则整个策略将不起作用，因为此扩展程序将无法访问另一个应用程序或扩展程序内的 iframe（即使 iframe 的来源是它通常具有权限的源）访问）。
• 如果您直接导航到about:blank，内容脚本将不会运行，并且会出现上下文菜单。（about:blank但是，如果在 iframe 中加载，则该块将正常工作。）
• 如果 iframe 具有sandbox不包含allow-scripts权限的属性，则扩展程序无法阻止来自该 iframe 的上下文菜单。

As long as none of those restrictions apply (and as long as a script on the page itself does not clear all event listeners on window), then it should work.

只要这些限制都不适用（并且只要页面上的脚本本身没有清除 上的所有事件侦听器window），它就应该可以工作。

I have used the code above to create a simple extension in the Chrome Web Store. (Developer-mode extensions now produce a warning on start-up, while Web Store extensions do not.)

我已经使用上面的代码在 Chrome Web Store 中创建了一个简单的扩展程序。（开发者模式扩展现在会在启动时产生警告，而 Web Store 扩展不会。）

回答by daCoda

If you're using jQuery, the below code will disable the context menu (aka 'right click').

如果您使用 jQuery，下面的代码将禁用上下文菜单（又名“右键单击”）。

$(document).on("contextmenu",function(){
       return false;
    }); 
});