如何在Chrome的kiosk模式下禁用右键单击/长触摸的上下文菜单?

sxissh06  于 11个月前  发布在  Go
关注(0)|答案(3)|浏览(167)

我们正在为一个博物馆开发软件。有几个交互式信息亭,触摸屏运行在Windows 8.1上,连接到本地网络。没有键盘,没有鼠标。Apache服务器上包含几个本地网站。每个信息亭运行一个谷歌Chrome的副本。所以,我们有一些本地Web应用程序,为博物馆游客提供信息。
现在,问题来了。如果访问者在屏幕上长时间触摸,它的工作原理就像右键单击一样。上下文菜单出现。我们根本不想要它。我已经在主体标签中添加了“oncontextmenu = return false”,这很有帮助。但是。我们有几个外部网站在iframe中运行(博物馆有连接到互联网).和上下文菜单出现在iframes. AFAIK,没有办法禁用它使用JavaScript.
我们的系统工程师得到了一个软件,它完全禁止在Windows中的右键单击。任何地方,包括Chrome。但是。它适用于鼠标。至于触摸.嗯,它禁止触摸事件任何地方除了Chrome。也许Chrome有自己的触摸事件处理程序,我不知道。
所以,毕竟。我们需要摆脱右键单击/长触摸在Chrome的亭模式iframe上的上下文菜单。请给予我一些建议。

zmeyuzjn

zmeyuzjn1#

我假设你在你的kiosk上显示一个普通的http://...(或者可能是https://...file://...)网页。如果你实际上显示的是一个应用程序(即chrome-extension://...),那么这个策略就不起作用了。
一个Chrome扩展将window.addEventListener("contextmenu", function(e) { e.preventDefault(); })注入到每个浏览上下文中,可能会阻止iframe上的上下文菜单。

manifest.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的Web Store上运行。如果您的kiosk正在显示一个应用程序,则整个策略都不起作用,因为此扩展将无法访问另一个应用程序或扩展内的iframe(即使iframe的源是它通常有权访问的源)。
  • 如果你直接导航到about:blank,内容脚本将不会运行,上下文菜单会出现。(但是,如果about:blank是在iframe中加载的,该块将正常工作。)
  • 如果iframe的sandbox属性不包含allow-scripts权限,则扩展无法阻止该iframe的上下文菜单。

只要这些限制都不适用(并且只要页面上的脚本本身没有清除window上的所有事件侦听器),那么它就应该工作。
我已经使用上面的代码创建了a simple extension in the Chrome Web Store。(浏览器模式的扩展现在在启动时会产生警告,而Web Store扩展不会。)

ukdjmx9f

ukdjmx9f2#

如果你使用的是jQuery,下面的代码将禁用上下文菜单(又名“右键单击”)。

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

字符串

myzjeezk

myzjeezk3#

取消ContextMenu事件意味着长时间单击也会被取消,因此我向添加了另一个事件处理程序,它为元素执行单击事件。

// removes context menu event that was interfering with long key presses
window.addEventListener("contextmenu", function(e) { 
    return false;
})

// make click event from long key press
window.addEventListener("touchend", function(e) { 
    let jel = $(e.target);

    if(jel.hasClass('nav-link'))    // special case for tab controls
        jel.tab('show');
    else
    {
        jel.trigger("click");
    }
    
    return false;
})

字符串

相关问题