如何在 Chrome 的信息亭模式下禁用右键单击/长按的上下文菜单?

Posted

技术标签:

【中文标题】如何在 Chrome 的信息亭模式下禁用右键单击/长按的上下文菜单?【英文标题】:How to disable context menu on right click/long touch in a kiosk mode of Chrome? 【发布时间】:2015-03-29 03:23:23 【问题描述】:

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

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

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

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

【问题讨论】:

虽然它可能可能是一个安全漏洞,但您可以尝试禁用 Chrome 的跨域来源策略并使用window.frames["frame_id"].document.oncontextmenu = function() return false ; @JCOC611,通过禁用 Chrome 的跨域源策略,您的意思是使用 --disable-web-security 开关启动?如果是这样,不幸的是,它不起作用...... 我认为如果您的 kisok 视图位于 Chrome 应用程序内部,我的回答将不起作用——您不能将内容脚本注入到加载到另一个扩展程序或应用程序页面内的 iframe 中,即使iframe 用于扩展程序通常应该可以访问的页面。 但是,我认为可以通过使用 <webview> 元素而不是 iframe 来解决您的问题:当 webview 触发 contentload 事件时使用 executeScript 方法。 【参考方案1】:

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

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

ma​​nifest.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:

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

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

这应该防止上下文菜单出现在允许运行扩展内容脚本的任何地方,包括在 iframe 内加载的任何页面。它失败的地方很少有值得注意的地方:

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

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

我已经使用上面的代码创建了a simple extension in the Chrome Web Store。 (开发者模式扩展现在会在启动时产生警告,而 Web Store 扩展则不会。)

【讨论】:

起初我对你的回答持怀疑态度,但是......它有效!真的行!非常感谢! Chrome 将显示一个弹出窗口,将用户更改为正在使用的不安全扩展程序。 @Twilite 嗯,我认为他们在最近的更新中添加了这种行为。我能提出的唯一建议是将扩展程序上传到 Chrome 网上应用店并从那里安装。如果您不是开发人员(并且不想设置或花费 5 美元),我将在今天晚些时候上传并添加链接。 如果你这样做了,那就太棒了。请在此处发布链接。 问候@apsillers,我已尝试将您的扩展部署为研发使用 [Ctrl + 右键单击​​] 作为其默认全局绑定以触发操作的 Windows 应用程序的一部分(在单词或图像上) ),它似乎不再抑制 chrome 62 中的上下文菜单。显然,chrome 去年某个时候开始推出自己的上下文菜单,我怀疑这就是为什么你的 ext 不再工作的原因——有什么想法/想法吗?【参考方案2】:

如果您使用的是 jQuery,下面的代码将禁用上下文菜单(也称为“右键单击”)。

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

【讨论】:

哇,干净又简单!

以上是关于如何在 Chrome 的信息亭模式下禁用右键单击/长按的上下文菜单?的主要内容,如果未能解决你的问题,请参考以下文章

禁用右键单击时如何检查chrome中的元素?

Chromium:在使用 Chromium 在信息亭模式下运行的 RPi 上禁用向左滑动导航?

触摸屏显示器上的 Google Chrome 信息亭模式兼容性

如何向禁用右键单击的 jQuery 添加异常?

如何通过网站上的链接打开信息亭模式

Electron 应用程序 - 如何在全屏模式下禁用/隐藏任务栏中的窗口