Zum Browser-Kontextmenü hinzufügen?

Lesezeit: 7 Minuten

Benutzer-Avatar
Rella

Ist es möglich, ein Element zum Rechtsklickmenü des Standardbrowsers hinzuzufügen?

Benutzer-Avatar
Alex

Eine Möglichkeit ist ersetzt das Kontextmenü mit Ihrem eigenen durch JavaScript ausgelösten Äquivalent.

Firefox implementiert die menu Element wo Sie zum bestehenden Kontextmenü hinzufügen können. Es wurde auch in Chrome hinter einem Flag implementiert. Leider wurde diese Funktion aus dem W3C-Standard entfernt aufgrund mangelnden Umsetzungsinteresses.

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

Um ein Element dazu zu bringen, dieses Kontextmenü zu verwenden, fügen Sie die hinzu contextmenu="mymenu" ihm zuschreiben. Das sieht man hier mymenu entspricht dem id Attribut der menu Element.

Quelle

Demo

Benutzer-Avatar
vsync

Update 28.08.18 – Das ist Obsolet


In modernen Browsern können Sie das eingebaute Kontextmenü wie folgt manipulieren:

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

Zum Weiterlesen:
http://www.w3.org/wiki/HTML/Elements/menu

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

  • Das ist wirklich ordentlich. Weißt du, ob es auch für Chrome funktionieren kann?

    – wubbewubbewubbe

    25. April 2013 um 9:43 Uhr

  • Ich habe gesucht, ich denke, es kann nicht (zumindest für jetzt)

    – wubbewubbewubbe

    25. April 2013 um 9:50 Uhr

  • Chrome ist der neue IE6… im Moment werden viele Dinge nicht unterstützt -> caniuse.com/#search=menu

    – vsync

    25. April 2013 um 12:52 Uhr

  • Ich habe mich nie getraut, es laut auszusprechen, aber das denke ich schon seit einiger Zeit

    – wubbewubbewubbe

    25. April 2013 um 13:46 Uhr

  • Dies ist veraltet und wurde aus der HTML-Spezifikation entfernt.

    – Benutzer1153660

    28. August 2018 um 8:38 Uhr

Benutzer-Avatar
Starx

Sie können den Browser eines Clients nicht mit einer Webseite ändern, also Sie Gewohnheit in der Lage sein, etwas hinzuzufügen Browser Speisekarte.

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

Es gibt mehrere Beispiele online, die Ihnen zeigen, wie dies erreicht werden kann.

  • Sie können Tastenanschläge und Mausereignisse abfragen und durch Ihre eigenen Funktionen ersetzen, warum sollte ein Kontextmenü anders sein?

    – wubbewubbewubbe

    25. April 2013 um 9:45 Uhr

  • @wubbewubbewubbe, Das OP möchte zum Kontextmenü des Browsers hinzufügen. Hast du darüber gelesen? Und das Beispiel, auf das ich verlinke, macht genau das, was Ihr Kommentar sagt. Also lesen die Downvoter jetzt nicht einmal die Frage oder die Antwort? Und Downvoting basierend auf Ihrem Kommentar? Wie amüsant!!

    – Starx

    9. Februar 2017 um 8:55 Uhr

  • @Starx, Soweit ich sehe, hat @wubbewubbewubbe Ihre Sicherheitsbedenken in Frage gestellt, indem er die Tatsache ansprach, dass Sie das Standardkontextmenü bereits deaktivieren und Ihr eigenes erstellen können. Er hat die Tatsache nicht in Frage gestellt, dass Sie versucht haben, die richtige Frage zu beantworten. Ich glaube auch, dass die Ablehnungen damit zusammenhängen, dass Sie “Sie können nicht” sagen, und angesichts der positiven Antworten oben scheint es in bestimmten Fällen, dass Sie “können”.

    – ImShogun

    14. Juni 2018 um 13:10 Uhr

  • @ImShogun, Die oben gewählte Antwort bezieht sich auf experimentelle Funktionen, die noch nicht vollständig unterstützt werden, und wenn dies der Fall ist, handelt es sich um eine Browserunterstützung, aber mein Punkt ist, dass Sie die Anwendung des Clients nicht ändern können. Für das, was bisher nicht experimentell ist, können Sie die Anwendung des Clients nicht ändern, also können Sie nichts zum Kontextmenü des Browsers hinzufügen. Das benutzerdefinierte Menü, das Sie anzeigen können, besteht darin, die Ereignisweitergabe zu manipulieren, wenn jemand mit der rechten Maustaste klickt. Also bleibe ich bei meiner Antwort.

    – Starx

    18. Juni 2018 um 9:45 Uhr

  • Da Sie jedes gewünschte Menü anzeigen können, indem Sie das Standardmenü ersetzen, können Sie das Standardmenü durch ein benutzerdefiniertes Menü ersetzen, das gleich aussieht, wenn Sie den Benutzer hacken möchten. Daher würde es Websites, die benutzerdefinierte Aktionen zum Standardkontextmenü hinzufügen könnten, nicht erlauben, etwas zu tun, was sie nicht bereits tun können; es würde lediglich ermöglichen, benutzerdefinierte Aktionen hinzuzufügen, ohne den Benutzer daran zu hindern, auch die Standardaktionen zu verwenden.

    – Wladimir Kornea

    5. Januar 2020 um 20:52 Uhr

Benutzer-Avatar
Jordan Georgiew

Sie könnten das Standardbrowsermenü unterdrücken und Ihre eigene hinzufügen … Reine JS- und CSS-Lösung für ein wirklich dynamisches Rechtsklick-Kontextmenü, wenn auch basierend auf vordefinierten Namenskonventionen für die Elemente ID, Links usw.
jsfiddle
und den Code, den Sie kopieren und in eine einzelne statische HTML-Seite einfügen könnten:

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())
  }
}
.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;
}
<!-- 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>

Es gibt keine Möglichkeit für eine Webanwendung, das Kontextmenü zum Zeitpunkt des Schreibens zu ändern, aber Sie können eine Chrome-Erweiterung mit schreiben chrome.contextMenus API: https://developer.chrome.com/docs/extensions/reference/contextMenus.

Benutzer-Avatar
Dragas

@alex zitieren, nur Firefox unterstützt es noch. ABER es hat Probleme, die Sie nicht bemerken würden, wenn Sie sich nicht eingehender damit befassen.

Ähnlich wie das Imagemap-Element teilt es den Zustand über mehrere Elemente, denen es zugewiesen wurde. Infolgedessen ist es sehr schwierig, damit zu arbeiten, wenn Sie dieselben Aktionen haben möchten, aber unterschiedliche Argumente für mehrere Elemente, auf die Sie mit der rechten Maustaste klicken können. Daher müssen Sie eindeutige Namen generieren menu -Element für jeden “eindeutigen” HTML-Knoten, dem Sie es zuweisen möchten. Wenn Sie beispielsweise jedem Kommentar auf der Seite eine Freigabefunktion hinzufügen möchten, müssten Sie für jeden Kommentar auf dieser Seite ein Menü-Tag hinzufügen, selbst wenn nur das Argument für die Freigabefunktion unterschiedlich ist.

Alles in allem müssen Sie abwägen, ob Sie in diesem Fall nur auf Firefox-Unterstützung eingehen möchten oder nicht.

1285670cookie-checkZum Browser-Kontextmenü hinzufügen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy