更新28/8/18 - 这是已过时

Question

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

Answer 1

更新28/8/18 - 这是已过时

在现代浏览器上，您可以像这样操作内置上下文菜单：

<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

Answer 2

一个选项是使用您自己的JavaScript触发等效的replace the context menu。

Firefox实现了menu element，您可以在其中添加到现有的上下文菜单中。它也是在旗帜后面的Chrome中实现的。不幸的是，由于缺乏实施兴趣，此功能已removed from the W3C standard。

<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与id元素的menu属性相匹配。

Source

Demo

Answer 3

由于您在询问可能性，因此在开发Google Chrome扩展程序时，可以轻松地将项目添加到上下文菜单中。 http://developer.chrome.com/extensions/contextMenus.html

Answer 4

您无法使用网页修改客户端的应用程序。如果可以做到这一点，那就想想黑客如何利用我们的计算机。

您可以做的是定义您自己的自定义菜单，同时用户点击右键。

检查此jquery插件示例：http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/

Answer 5

您可以隐藏默认的浏览器菜单并添加自己的... 纯JS和CSS解决方案，可实现真正的动态右键单击上下文菜单，尽管它基于元素ID，链接等的预定义命名约定。 jsfiddle 以及您可以复制的代码粘贴到单个静态html页面中：

     <html>
     <head>
        <style>
           .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;
           }
        </style>
     </head>

     <body>

           <!-- 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>

        <script>
           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())
              }
           }

        </script>
     </body>
     </html>

Answer 6

引用@alex，只有firefox仍然支持它。但是它有一些问题，除非您深入研究，否则您不会注意到。

与图像映射元素非常相似，它在已分配给多个元素之间共享状态。结果，当您要执行相同的操作但要右键单击多个元素的参数不同时，将很难使用。结果，必须为每个要分配给它的“唯一” HTML节点生成唯一命名的menu元素。例如，如果要向页面中的每个注释添加共享功能，则即使该共享功能的参数不同，也必须为该页面中的每个注释添加菜单标签。

总而言之，您将需要评估您是否想深入了解仅支持此功能的Firefox。

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

6 个答案:

更新28/8/18 - 这是已过时