webentwicklung-frage-antwort-db.com.de

Hinzufügen zum Browser-Kontextmenü?

Kann ein Element zum Rechtsklickmenü des Standardbrowsers hinzugefügt werden?

39
Rella

Eine Möglichkeit ist, das Kontextmenü zu ersetzen durch Ihr eigenes, durch JavaScript ausgelöstes Äquivalent.

Firefox hat das menu-Element implementiert, wo Sie das vorhandene Kontextmenü hinzufügen können. Es wurde auch in Chrome hinter einer Flagge implementiert. Leider wurde dieses Feature aus dem W3C-Standard entfernt aus Mangel an Implementierungsinteresse entfernt.

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

Damit ein Element dieses Kontextmenü verwenden kann, fügen Sie ihm das contextmenu="mymenu"-Attribut hinzu. Hier sehen Sie, dass mymenu mit dem id-Attribut des menu-Elements übereinstimmt.

Quelle

Demo

30
alex

Update 28.8.18 - Dies ist Obsolete


In modernen Browsern können Sie das integrierte Kontextmenü wie folgt bearbeiten:

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

Weitere Informationen: http://www.w3.org/wiki/HTML/Elements/menu

demo: https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309

36
vsync

Da Sie nach Möglichkeiten fragen, können Sie beim Entwickeln einer Google Chrome-Erweiterung Elemente problemlos in das Kontextmenü einfügen. http://developer.chrome.com/extensions/contextMenus.html

1
hudidit

Sie können die Anwendung des Kunden nicht über eine Webseite ändern. Wenn dies möglich ist, sollten Sie nur darüber nachdenken, wie Hacker unseren Computer ausnutzen könnten.

Sie können Ihr eigenes benutzerdefiniertes Menü definieren, während der Benutzer mit der rechten Maustaste klickt. 

Überprüfen Sie dieses Jquery-Plugin-Beispiel: http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/

0
Starx

Sie können das Standardbrowsermenü unterdrücken und Ihre eigene ... Pure JS- und css-Lösung für ein wirklich dynamisches Kontextmenü mit Rechtsklick hinzufügen, das jedoch auf vordefinierten Namenskonventionen für die Elemente id, Links usw. basiert. jsfiddle und den Code, den Sie kopieren konnten, in eine einzige statische HTML-Seite einfügen:

     <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