web-dev-qa-db-fra.com

Ajout au menu contextuel du navigateur?

Est-il possible d'ajouter un élément au menu de clic droit du navigateur par défaut?

javascripthtmlbrowser
39
Rella

Une option consiste à remplacer le menu contextuel avec votre propre équivalent déclenché par JavaScript.

Firefox a mis en œuvre l'élément menu où vous pouvez ajouter des éléments du menu contextuel existant. Il a également été implémenté dans Chrome derrière un drapeau. Malheureusement, cette fonctionnalité a été retirée de la norme W3C } en raison d'un manque d'intérêt pour la mise en œuvre.

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

Pour qu'un élément utilise ce menu contextuel, ajoutez-lui l'attribut contextmenu="mymenu". Vous pouvez voir ici que mymenu correspond à l'attribut id de l'élément menu.

La source

_ { Démo } _

30
alex

Mise à jour 28/8/18 - Ceci est Obsolète

Sur les navigateurs modernes, vous pouvez manipuler le menu contextuel intégré comme suit:

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

Pour en savoir plus: http://www.w3.org/wiki/HTML/Elements/menu

démo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309

36
vsync

Puisque vous demandez quelle est la possibilité, vous pouvez facilement ajouter un élément au menu contextuel lorsque vous développez une extension Google Chrome. http://developer.chrome.com/extensions/contextMenus.html

1
hudidit

Vous ne pouvez pas modifier l'application du client à l'aide d'une page Web. Si cela était possible, réfléchissez à la manière dont les pirates pourraient exploiter notre ordinateur.

Ce que vous pouvez faire, c'est définir votre propre menu personnalisé, tandis que l'utilisateur clique avec le bouton droit de la souris. 

Vérifiez cet exemple de plug-in jquery: http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/

0
Starx

Vous pouvez supprimer le menu par défaut du navigateur et ajouter votre propre ... Solution pure JS et css pour un menu contextuel véritablement dynamique, bien que basé sur des conventions de nommage prédéfinies pour les éléments id, links, etc. jsfiddle et le code que vous pourriez copier en une seule page html statique:

     <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>
0
Yordan Georgiev