Можно ли добавить элемент в меню правой кнопки мыши браузера по умолчанию?
Добавление в контекстное меню браузера?
Ответ 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 соответствует атрибуту id элемента menu.
Ответ 2
Обновление 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
Ответ 3
Поскольку вы спрашиваете о возможности, вы можете легко добавлять элемент в контекстное меню, когда разрабатываете расширение Google Chrome. http://developer.chrome.com/extensions/contextMenus.html
Ответ 4
Вы не можете изменить клиентское приложение с помощью веб-страницы. Если бы это было возможно, просто подумайте о том, как хакеры могут использовать наш компьютер.
Что вы можете сделать, это определить свое собственное меню, в то время как пользователь щелкает правой кнопкой мыши.
Проверьте этот пример плагина jquery: http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
Ответ 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>
Ответ 6
Цитируя @alex, только Firefox по-прежнему поддерживает это. НО у него есть проблемы, которые вы не заметите, если не углубитесь в это.
Как и элемент карты изображения, он разделяет состояние между несколькими элементами, которым он был назначен. В результате очень сложно работать, когда вы хотите выполнять одинаковые действия, но с разными аргументами для нескольких элементов, по которым вы можете щелкнуть правой кнопкой мыши. В результате вы должны сгенерировать уникально именованный элемент menu для каждого "уникального" узла HTML, которому вы хотите назначить его. Например, если вы хотите добавить функцию общего доступа к каждому комментарию на странице, вам нужно будет добавить тег меню для каждого комментария на этой странице, даже если отличается только аргумент для функции общего доступа.
В общем, вам нужно будет оценить, хотите ли вы углубиться в поддержку Firefox только на этом.