Browser-Popup Fenster mit rechter Maustaste

Hallo zusammen,

hoffe, Ihr hattet soweit schöne Weihnachten. Sie sind leider rum und die täglichen "wichtigen" Fragen tauchen wieder auf

Ich bin am Entwickeln einer Web-Applikation mit Grundwerkzeugen (Javascript/PHP/ASP...).
Da ich möglichst nahe am Erscheinungsbild der Desktop-Applikationen bleiben will, möchte ich das Browser-Menü der rechten Maustaste
selber steuern können. Da ich schon einiges an Javascript und CSS in den Dateien habe, wäre es mir am liebsten, wenn
ich mit der rechten Maustaste ein Popup-Fenster öffnen könnte, dass mein eigenes Menü enthält.

Da der Inhalt des Menüs abhängig davon ist, an welcher Stelle die rechte Maustaste auf der Seite gedrückt wurde, brauche ich eine
gewisse Dynamik bzgl. des Menü-Inhaltes.
Eine statische CSS-Lösung für die Maustaste habe ich schon ( http://chaoslayer.de/-%20test%20-/events.html ), die bringt mich jedoch nur bedingt weiter.

Hat jemand eine Idee?
Vielen Dank für Euer Feedback und Guten Rutsch.
Gruss

Ich vergaß vielleicht zu sagen, dass die Popup-Blocker wahrscheinlich ein Problem hierbei sind. Ein "window.open" bei normalem
Klick ist ja möglich. Ich bräuchte das eben mit der rechten Maustaste. Oder vielleicht doch dynamisches CSS, falls das geht?

Please also mark the comments that contributed to the solution of the article

Content-Key: 76712

Url: https://administrator.de/contentid/76712

Printed on: April 16, 2024 at 12:04 o'clock

8 Comments

Latest comment

Hallo,

das ist so schwer zu sagen.

Entweder Du baust dein Menü dynamisch mit Javascript auf oder du benutzt AJAX um sie zu generieren.

Popup Blocker werden keine Probleme bereiten wenn du mit DIV-Popups arbeitest.

mfG

hallo Cubic83,
vielen dank für deine nachricht. weisst du mehr über DIV-Popups? meinst du div-tags, um sie
mittels ajax zu füllen? wäre nicht schlecht, da ich kein css mehr benutzen will, da die seite
schon so viel hat.
gruss

hallo,

das hat nicht wirklich direkt was mit CSS zu tun.

Zunächst musst Du dein Popup designen. Mit oder ohne CSS.
Jetzt hast Du mehrere Möglichkeiten.

1) AJAX
2) Nur Javascript

Auf jeden Fall brauchst Du in der Seite dann:

      <div id="MEINDIVPOPUP" style="visibility:hidden"></div>  

Für 1:
=======

Du speichers das Popupdesign als POPUP.PHP ab. In dieser POPUP.PHP wird dann das Popup anhand der Parameter aufgebaut. (Die POPUP.PHP wird ja Parameter empfangen die per GET oder POST ausgelesen werden
können). Das Resultat schreibst Du dann in den <div> Container. Das sieht dann so aus:

function GetPopUp() {

var External = null;

if (typeof XMLHttpRequest != 'undefined') { External = new XMLHttpRequest(); }  
  
if (!External) {
    try {
	External  = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch(e) {
       try {
           External  = new ActiveXObject("Microsoft.XMLHTTP");  
       } catch(e) {
          External  = null;
       }
    }
}
		
if (External) {
     External.open('GET', './POPUP.PHP?a=1&b=2', true);  
     External.onreadystatechange = function () {
     if (External.readyState == 4) {
        document.getElementById('MEINDIVPOPUP').innerHTML = External.responseText;  
     }
};
External.send(null);
}

document.getElementById('MEINDIVPOPUP').style.visibility = 'visible';  
}

<a href="#" onRightClick="GetPopUp()">Link</a>  

External.open('GET', './POPUP.PHP?a=1&b=2', true);

Die Parameter für die Variablen a und b übergibts Du dann an die Funktion GetPopUp(). Man lädt also die Ausgabe der PHP Seite "live" in den Div container hinein. Und das bei jedem Aufruf der Datei.

Für 2:
=======

Du schreibst die Tabelle gleich in den Quellcode der Hauptseite rein:

<div id="MEINDIVPOPUP" style="visibility:hidden">  

   <table>
      <tr>
          <td><div id="ITEM1"></div></td>  
      </tr>
      <tr>
         <td><div id="ITEM2"></div></td>  
      </tr>
   </table>
          

</div>

Um dann mittels Javascript die innerHTML-Werte von ITEM1 und ITEM2 on the Fly zu generieren.

function GetPopUP(a, b) {
   document.getElementById('ITEM1').innerHTML = '<a href="meinlink?a=' + a + '&b=' + b">Eintrag 1</a>';  
   document.getElementById('ITEM2').innerHTML = '<a href="meinlink?a=' + a + '&b=' + b">Eintrag 2</a>';  
}

Wie gesagt ist schwer etwas vorzuschlagen wenn mann die Richtung nicht weiss. Was genau willst Du denn anzeigen? Kannst Du mal ein Beispiel geben?

mfG

hallo Cubic83,
vielen dank für deine antwort. ist ja toll, gleich mit code!
was ich mit der rechten maustaste möchte? etwa das gleiche, was man in einer desktop-anwendung
eben so hat. d.h. abhängig von dem objekt, über dem die rechte maustaste gedrückt wird, soll
ein kontextmenü erscheinen, dass zusätzlich funktionen einblendet, die das objekt besitzt.
so ähnlich, wie es in entwicklungsumgebungen wie eclipse oder anderen ist.

beispiel: bei mir geht es hier geht es um eine datenbankanwendung. die ergebnisse einer
db-abfrage werden in einer baumstruktur mit links angezeigt. so soll z.b. es an den knotenpunkten
nicht möglich sein, alle datensätze darunter zu löschen. jedoch an den "blättern" soll die funktion
zum löschen des datensatzes im kontextmenü erscheinen.

ich könnte die ganzen objekt- bzw. link-abhängigen funktionen in ein normales popup-fenster packen,
ich sehe jedoch bei den anwendern immer mehr, dass sie das kontextmenü mit der rechten maustaste
nützen. dabei wird aber das original browser-kontextmenü kaum genützt.

hab mich gestern noch mit div-menüs beschäftigt. es geht schon in diese richtung. ich würde
gerne deine 2. möglichkeit (nur javascript) bevorzugen, da es nicht soviele
browserabhängigkeiten wie bei ajax gibt. jedoch, wenn ich es richtig verstanden habe, kann
ich die anzahl der menüpunkte nicht dynamisch aufbauen oder? (die tabelle mit ihren zeilen
muss schon in der seite stehen)

mein "traum" wäre es, wenn die rechte maustaste eine javascript funktion startet, die dann
mit window.open ein popup als "kontextmenü" öffnet, aber hier greifen die popup-blocker.
dieses menü ließe sich dann auch noch verschieben!
die koordinaten, wo die rechte maustaste gedrückt wurde, habe ich schon.

ich hoffe, es ist jetzt etwas klarer, was mir vorschwebt.
danke und gruss

Also du kannst auch Tabellen dynamisch per Javascript zur Laufzeit verändern oder erstellen.

var Tabelle = document.createElement("table");   

var TR = Tabelle.insertRow(0); 
var TD1 = document.createElement("td");   

var TD1TEXT = document.createTextNode("<b>Hallo</b> Welt");   

TD1.appendChild(TD1TEXT); 

TR.appendChild(TD1); 

So ungefähr würde das aussehen. Ich nehme aber dann doch immer lieber PHP anstatt Javascript.

Aber es geht natürlich auch beim OnRightClick-Event eine neue Tabelle zu erstellen. Nun kannst Du ja je nach Object beliebig viele Zeilen hinzufügen.

Du musst nur immer darauf achten dass die Objekte auch wirklich schon erstellt wurden, wenn Du darauf zugreifst. Ausserdem am Besten nach dem Schliessen das erstellte Objekt wieder löschen. (Was geschieht wenn der Benutzer nur ne Stunde Kontextmenüs öffnet? Die bleiben sonst die ganze Zeit im Speicher.)

Also persönlich finde ich window.open keine gute Idee. Wie Du selbst bereits gesagt hast, greifen die Popupblocker, die Fenster müssen dann extra positionniert werden, Fenstergrössen stimmen nicht immer, Du musst Fensterübergreifend programmieren, etc.

mfG

hallo Cubic83,
du hast recht. beeinflusse gerade mittels javascript/dom ein dropdown feld. das geht prima.
könnte tabelle anlegen und diese dann per dom verändern. kann man diese tabelle auch
positionieren?
wenn du php benutzt, musst du aber kurzzeitig den server bemühen oder?
glaube, bin jetzt nahe dran an dem, was ich wollte.
gruss

Ja, der Server wird kurzzeitig bemüht. Ich habe auch nicht gesagt, dass es eine gute Methode ist ;) Aber ich bin etwas Javascript faul ;)

function MoveTableTo(tbl, x, y) {
   tbl.style.visibility = "visible";  
   tbl.style.left = x;
   tbl.style.top = y;
   tbl.style.position = "absolute";  
}

Ist aber jetzt ungetestet .

mfG

vielen dank! hab auch schon etwas recherchiert. geht in die gleiche richtung.
das werde ich wohl benutzen. glaube, das ich damit die rechte maustaste gut bedienen kann.
guten rutsch!
gruss

German solved Question Web Development Development