将选项添加到浏览器上下文菜单？

Question

是否可以将项目添加到默认浏览器右键菜单中？

- Rella

Answer 1

一种选择是使用JavaScript触发的自定义上下文菜单替换上下文菜单。

Firefox实现了menu元素，您可以将其添加到现有的上下文菜单中。它也在Chrome中通过标志实现。不幸的是，由于缺乏实现兴趣，这个功能已被从W3C标准中删除。

<menu type="context" id="mymenu">
    <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>
    <menuitem label="Skip to Comments" onclick="window.location='#comments';" icon="/images/comment_icon.gif"></menuitem>
    <menu label="Share on..." icon="/images/share_icon.gif">
        <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
        <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    </menu>
</menu>

为了让一个元素使用这个上下文菜单，需要将contextmenu="mymenu"属性添加到它上面。你可以看到这里的mymenu与menu元素的id属性匹配。

来源

演示

- alex

Answer 2

更新于2018年8月28日 - 此内容已过时

---

在现代浏览器中，您可以通过以下方式操作内置上下文菜单：

<menu type="context" id="supermenu">
 <menuitem label="trial" onclick="alert('Smile please')"></menuitem>
  <menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
  <menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
  <menu label="share">
    <menuitem label="twitter" onclick="alert('foo')"></menuitem>
    <menuitem label="facebook" onclick="alert('bar')"></menuitem>
  </menu>
</menu>

<a href='#' contextmenu="supermenu">Right click me</a>

了解更多信息请参考： http://www.w3.org/wiki/HTML/Elements/menu

示例代码：https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309

- vsync

---

这真的很棒。你知道它是否也可以在Chrome上运行吗？ - wubbewubbewubbe

Chrome 是现在新的 IE6...... 目前还有很多功能不受支持 -> http://caniuse.com/#search=menu - vsync

我从来没有敢大声说出来，但我已经考虑了一段时间了。 - wubbewubbewubbe

截至2017年7月，caniuse.com显示Firefox仅部分支持...没有其他浏览器。 - freginold

这个已经在HTML规范中被弃用并移除。 - user1153660

Answer 3

你可以抑制默认的浏览器菜单并添加自己的... 通过预定义元素id、链接等命名约定，使用纯JS和CSS解决方案创建一个真正动态的右键菜单。 jsfiddle 以下是可复制粘贴到单个静态HTML页面的代码：

var rgtClickContextMenu = document.getElementById('div-context-menu');

/** close the right click context menu on click anywhere else in the page*/
document.onclick = function(e){
   rgtClickContextMenu.style.display = 'none';
}

/**
present the right click context menu ONLY for the elements having the right class
by replacing the 0 or any digit after the "to-" string with the element id , which
triggered the event
*/
document.oncontextmenu = function(e){
  //alert(e.target.id)
  var elmnt = e.target
  if ( elmnt.className.startsWith ( "cls-context-menu")) {
     e.preventDefault();
     var eid = elmnt.id.replace(/link-/,"")
     rgtClickContextMenu.style.left = e.pageX + 'px'
     rgtClickContextMenu.style.top = e.pageY + 'px'
     rgtClickContextMenu.style.display = 'block'
     var toRepl = "to=" + eid.toString()
     rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g,toRepl)
     //alert(rgtClickContextMenu.innerHTML.toString())
  }
}

.cls-context-menu-link {
   display:block;
   padding:20px;
   background:#ECECEC;
}

.cls-context-menu { position:absolute; display:none; }

.cls-context-menu ul, #context-menu li {
   list-style:none;
   margin:0; padding:0;
   background:white;
}

.cls-context-menu { border:solid 1px #CCC;}
.cls-context-menu li { border-bottom:solid 1px #CCC; }
.cls-context-menu li:last-child { border:none; }
.cls-context-menu li a {
   display:block;
   padding:5px 10px;
   text-decoration:none;
   color:blue;
}
.cls-context-menu li a:hover {
   background:blue;
   color:#FFF;
}

<!-- those are the links which should present the dynamic context menu -->
<a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
<a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

<!-- this is the context menu -->
<!-- note the string to=0 where the 0 is the digit to be replaced -->
<div id="div-context-menu" class="cls-context-menu">
   <ul>
       <li><a href="#to=0">link-to=0 -item-1 </a></li>
       <li><a href="#to=0">link-to=0 -item-2 </a></li>
       <li><a href="#to=0">link-to=0 -item-3 </a></li>
   </ul>
</div>

- Yordan Georgiev

Answer 4

截至目前为止，Web应用程序没有任何方式可以更改上下文菜单，但是您可以使用chrome.contextMenus API编写Chrome扩展程序：https://developer.chrome.com/docs/extensions/reference/contextMenus。

- Saiansh Singh

Answer 5

你无法通过网页修改客户端浏览器，因此你将无法向浏览器菜单中添加任何内容。

你可以在用户右键点击时定义自己的自定义菜单。

有几个在线示例可以向你展示如何实现这一点。

- Starx

---

你可以查询键盘和鼠标事件，并用自己的函数替换它们，那么为什么上下文菜单会有所不同呢？ - wubbewubbewubbe

@wubbewubbewubbe，OP想要添加到浏览器的上下文菜单中。你了解这个吗？我链接的示例恰好做到了你评论所说的事情。所以那些踩了问题或答案的人现在甚至都没有阅读问题？并且基于你的评论进行投票？太有趣了！！ - Starx

@Starx，根据我所看到的，@wubbewubbewubbe提出了一个问题，他质疑你的安全问题，并指出你已经可以禁用默认上下文菜单并创建自己的菜单。他并没有质疑你试图回答正确的问题。我也认为你所说的“你不能”，以及上面得到赞同的答案，在某些情况下似乎是可以的，这可能与你被踩的原因有关。 - ImShogun

@ImShogun，上面被赞的答案讨论了尚未完全支持的实验功能。当它们得到支持时，它们将成为浏览器支持的一部分。但我的观点是，您不能修改客户端的应用程序。 至今还未有可供使用的功能，因此您无法修改客户端的应用程序，因此无法添加到浏览器的上下文菜单中。您可以通过篡改事件传播来显示自定义菜单，以使其与我的回答保持一致。 - Starx

由于您可以通过替换默认菜单来显示任何菜单，因此如果您想要黑客用户，则可以使用外观相同的自定义菜单替换默认菜单。因此，允许网站向默认上下文菜单添加自定义操作不会使它们能够做任何它们无法做到的事情；它只是使添加自定义操作成为可能，而不会阻止用户同时使用默认操作。 - Val Kornea

Answer 6

引用@alex的话，只有Firefox仍支持它。但它有问题，除非你深入了解它，否则你不会注意到。

就像图像映射元素一样，它在被分配给多个元素时共享状态。因此，当您想要对多个可以右键单击的元素执行相同的操作但具有不同的参数时，它非常难以使用。因此，您必须为要将其分配给的每个“唯一”HTML节点生成唯一命名的menu元素。例如，如果您想要在页面上的每个评论中添加共享功能，则必须为该页面中的每个评论添加一个菜单标签，即使只有共享函数的参数不同。

总之，您需要评估是否要深入研究Firefox仅支持此功能。

- Dragas