Ein Kontextmenü mit JavaScript

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.1 - 6.22, 7.0 und 7.1, sowie Mozilla 1.0, 1.21 und 1.4.

Im IE 4 und früher, NN 6.01 und früher oder Opera wird weiterhin das normale Kontextmenü angezeigt.
Für alle Browser gilt die Einschränkung, dass das Kontextmenü z.B. von einem Java-Applet überlagert wird.

Demo: rechter Mausklick ... !

JavaScript-Quellcode von KontextMenue.js:
(vollstandige Layoutangaben im Download)

// Nur für IE 5+ und NN 6+
ie5=(document.getElementById && document.all && document.styleSheets)?1:0;
nn6=(document.getElementById && !document.all)?1:0;

// Kontextmenü initialisieren
if (ie5 || nn6) {
  menuWidth=122, menuHeight=183;
  menuStatus=0;

  document.write(
     "<div id='menu' style='position:absolute;top:-250;left:0;z-index:100'>"
    +"<table width='"+menuWidth+"' height='"+menuHeight+"'>"
    +"<tr><td><a href='javascript:history.back()'>Zurück</a></td></tr>"
    +"<tr><td><a href='javascript:history.forward()'>Vorwärts</a></td></tr>"
    +"<tr><td><a href='javascript:location.reload()'>Aktualisieren</a></td></tr>"
    +"<tr><td><a href='javascript:viewSource()'>Quelltext</a></td></tr>"
    +"<tr><td><a href='javascript:print()'>Drucken</a></td></tr>"
    +"<tr><td><a href='javascript:openFrameInNewWindow()'>Neues Fenster</a></td></tr>"
    +"</table></div>");

  // Rechter Mausklick: Menü anzeigen, linker Mausklick: Menü verstecken
  document.oncontextmenu=showMenu; //oncontextmenu geht nicht bei NN 6.01
  document.onmouseup=hideMenu;
}

// Kontextmenü anzeigen
function showMenu(e) {
  if(ie5) {
    if(event.clientX>menuWidth) xPos=event.clientX-menuWidth+document.body.scrollLeft;
    else xPos=event.clientX+document.body.scrollLeft;
    if (event.clientY>menuHeight) yPos=event.clientY-menuHeight+document.body.scrollTop;
    else yPos=event.clientY+document.body.scrollTop;
  }
  else {
    if(e.pageX>menuWidth+window.pageXOffset) xPos=e.pageX-menuWidth;
    else xPos=e.pageX;
    if(e.pageY>menuHeight+window.pageYOffset) yPos=e.pageY-menuHeight;
    else yPos=e.pageY;
  }
  document.getElementById("menu").style.left=xPos;
  document.getElementById("menu").style.top=yPos;
  menuStatus=1;
  return false;
}

// Kontextmenü verstecken
function hideMenu(e) {
  if (menuStatus==1 && ((ie5 && event.button==1) || (nn6 && e.which==1))) {
    setTimeout("document.getElementById('menu').style.top=-250",250);
    menuStatus=0;
  }
}

// Quelltext anzeigen
function viewSource() {
  var w=window.open("view-source:"+window.location,'','resizable=1,scrollbars=1');
}

// Seite in neuem Fenster öffnen
function openFrameInNewWindow() {
  var w=window.open(window.location,'','resizable=1,scrollbars=1,status=1');
}

Download KontextMenue.zip (Demo mit vollständigem Layout ca. 2 kb)