Javascript 添加到浏览器上下文菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4447321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding to browser context menu?
提问by Rella
Is it possible to add item to the default browser right button click menu?
是否可以将项目添加到默认浏览器右键单击菜单？
采纳答案by alex
One option is to replace the context menuwith your own JavaScript triggered equivalent.
一种选择是用您自己的 JavaScript 触发的等效项替换上下文菜单。
Firefox implemented the menuelementwhere you can add to the existing context menu. It was also implemented in Chrome behind a flag. Unfortunately this feature has been removed from the W3C standarddue to a lack of implementation interest.
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>
To make an element use this context menu, add the contextmenu="mymenu"attribute to it. You can see here that mymenumatches the idattribute of the menuelement.
要使元素使用此上下文菜单，请向其添加contextmenu="mymenu"属性。您可以在此处看到mymenu匹配元素的id属性menu。
回答by vsync
Update 28/8/18 - This is Obsolete
28/8/18 更新 - 这已过时
On modern browsers you can manipulate the built-in context menu like so:
在现代浏览器上，您可以像这样操作内置的上下文菜单：
<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>
For further reading: http://www.w3.org/wiki/HTML/Elements/menu
进一步阅读：http: //www.w3.org/wiki/HTML/Elements/menu
demo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
演示：https: //bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
回答by hudidit
Since you are asking about possibility, you can add item to context menu easily, when you are developing a Google Chrome Extension. http://developer.chrome.com/extensions/contextMenus.html
由于您是在询问可能性，因此在开发 Google Chrome 扩展程序时，您可以轻松地将项目添加到上下文菜单中。 http://developer.chrome.com/extensions/contextMenus.html
回答by Yordan Georgiev
You could suppress the default browser menu and add your own ... Pure JS and css solution for a truly dynamic right click context menu, albeit based on pre-defined naming conventions for the elements id, links etc. jsfiddleand the code you could copy paste into a single static html page :
您可以取消默认浏览器菜单并添加您自己的...纯 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>
回答by Dragas
Quoting @alex, only firefox still supports it. BUT it has issues that you would not notice unless you delved deeper into it.
引用@alex，只有 Firefox 仍然支持它。但是它有一些你不会注意到的问题，除非你深入研究它。
Much like the image map element, it shares state across multiple elements it has been assigned to. As a result, it is very hard to work with when you want to have samey actions but with different arguments for multiple elements that you can right click on. As a result, you must generate uniquely named menuelement for each "unique" HTML node that you want to assign it to. For example if you want to add share feature to each comment in page, you would have to add a menu tag for each comment in that page even if only the argument for sharing function is different.
与图像映射元素非常相似，它在分配给它的多个元素之间共享状态。因此，当您想要具有相同的操作但对于可以右键单击的多个元素具有不同的参数时，很难处理。因此，您必须menu为要分配给它的每个“唯一”HTML 节点生成唯一命名的元素。例如，如果您想为页面中的每个评论添加共享功能，则即使只有共享功能的参数不同，您也必须为该页面中的每个评论添加一个菜单标签。
All in all, you will need to evaluate whether or not you want to go deep on firefox only support on this one.
总而言之，您需要评估是否要深入了解仅支持这一功能的 Firefox。
回答by Starx
You can't modify a client's browser with a web page, thus you won'tbe able to add anything to the browser'smenu.
您无法使用网页修改客户端的浏览器，因此您将无法向浏览器的菜单中添加任何内容。
What you can do, is define your own custom menu, while user right clicks.
您可以做的是定义您自己的自定义菜单，同时用户右键单击。
There are several example online which will show you how this can be achieved.
有几个在线示例将向您展示如何实现这一点。
