Crossbrowser IFRAME onBlur Ereignis
gefunden am 31.03.2008Hi, Dieses Posting besch?igt sich mit dem EVENT "IFRAME.onBlur" - das Event das ausgef? wird, wenn ein IFRAME den Focus verliert Ich habe eine Cross-Browser L?g gefunden, aber ich frage mich ob das nicht auch anders (einfacher) ginge. Vielleicht hilfts euch vielleicht k? ihr mir helfen ;) Ersteinmal, das ist was ich machen will, und warum ich ?haupt dieses Event brauche: BEISPIEL (Der Inhalt des Toolwindows stammt aus dem OpenWYSIWYG-Editor) Ich entwickele grade eine PHP/Javascript/Ajax Application Daf??e ich soetwas wie Toolwindows/Dropdowns (IFrames) haben, die sich "onthefly" ?en lassen um die Eigenschaften eines Objekts zu bestimmen. Wenn das ToolFenster seinen Job erledigt hat, soll es einen neuen Wert f?ie Eigenschaft zur?eben. Beispiel: Color Picker. Window ?fnet -> User clickt auf eine Farbe -> Return/Set neuen Farbwert -> Window schlie?n Also kein Problem bis hier ;) Das besondere ist das diese Toolwindows eine ganze Reihe von Einstell-Reglern und Eingabefeldern haben k?n. So das der R?abe wert eine Kombination von verschiedenen Einstellungen ist. Beispiel: BorderStyle.-> (Border Width, Border Style, Border Color) Hier ist das Problem! Weil im gegensatz zum einfachen Color-Picker kein Event (wie color.onClick) existiert, das ank?gt das der User seine Einstellungen zu ende gemacht hat... Und ich will keinen Ok/Abbrechen Button auf einem Dropdown! ALso hier ist meine Idee: IFRAMES benutzen und deren onBlur-Event capturen. So das wenn der User Ausserhalb des IFRAMES clickt, der Browser/die Hauptseite merkt: Arbeit ist fertig, hohl dir den R?abewert und schlies' das ToolFenster. Beim IE gibts da kein Problem Hauptseite: Code: function toolwindow_blur() { // var resp=window.frames['iframe1'].toolwindow_getData(); // Fetch data from ToolWindow var f = document.getElementsByName("iframe1")[0]; f.style.display="none"; // alert(resp); } f = document.getElementsByName("iframe1")[0]; f.onblur=toolwindow_blur; Das OnBlur Event wird ausgel?wenn der User ausserhalb des IFRAMEs klickt. toolwindow_getData() ist eine Funktion die im TollWindow definiert wird und die Einstellung zur?ibt. Danach wird das Toolfenster geschlossen. Perfekt! Aber jetzt kommt die CrossBrowser Problematik :( FireFox (und fast alle anderen Browsers?) l? das onBlur Event weder f?en Iframe noch f?as Iframe.contentWindow aus... Nachdem ich Stunden -ergebnislos- das Internet durchsucht habe kam mir eine Idee: Diese L?g funktioniert!.. aber ich frag mich ob es nicht eleganter geht ;) Ok zuerst die Idee: In dem ToolWindow ALLE onBlur und ALLE onFocus Events abfangen. Wenn man sich so normalerweise durch ein Dokument klickt l?man immer zwei Events aus: Zum Beispiel: Wenn du von Textbox1 zu Textbox2 wechselst, wird Textbox1 das "onBlur" Ereigniss starten, dann folgt die Textbox2 mit dem "onFocus"-Ereigniss. Diese Reihenfolge brachte mich auf diesen etwas abgedrehten L?gsansatz: Wenn das onBlur Event ausgel?wird kann es einen timeout starten. Das folgende onfocus resettet den timeout dann wieder. IM TOOLWINDOW.HTML: Code: var toolwindow_closedown; function toolwindow_close(){ document.removeEventListener("blur", toolwindow_blur, true); // avoid event-bubbling parent.toolwindow_blur(); // call parent event (what will getData and close the Iframe } function toolwindow_blur(e) { window.clearTimeout(toolwindow_closedown); // avoid double Timeouts toolwindow_closedown = window.setTimeout("toolwindow_close()", 100); // launch close-timeout } function toolwindow_focus(e) { window.clearTimeout(toolwindow_closedown); // stop close-timeout } if(document.addEventListener) // Init { document.addEventListener("blur", toolwindow_blur, true); document.addEventListener("focus", toolwindow_focus, true); } Wenn also der User nur rumklickt, wird immer ein OnFocus Ereignis dem OnBlur Ereignis folgen um den Timer zur?usetzen. Wenn der User ausserhalb des toolwindows klickt, wird das blur Event ausgel?aber es das Focus Event nicht, denn der focus ist dann ausserhalb des IFRAMEs. Der Timeout wird nicht gestoppt und l?so "toolwindow_close" aus. Diese Funktion ruft die toolwindow_blur() Funktion DES HAUPTDOKUMENTES auf, welche auch von IE (da aber direkt) aufgerufen wird (s.o). Bevor das gemacht wird, entfernen wir noch den Eventhandler f?as ONBLUR damit es keine Schleifen gibt. Das funktioniert f?IREFOX Juhuuu :P Ein bissel wirr, ja? ;) Wartet es wird noch besser ;) Opera (und vermutlich auch ein paar andere Browser ) hat einen bug?! Buttons l? das "onFocus" Erignis nicht richtig aus ODER in der falschen Reihenfolge ODER WAS AUCH IMMER... Jedenfalls wenn auf dem Toolwindow ein Button ist und der User klickt diesen an, wird das ToolWindow "denken": 'ich bin fertig', und daraufhin unsere selbstgebaute onBlur-funktion [toolwindow_close()] aufrufen (die in Folge dessen das Fenster schlie?). Nun nachdem ich das toolWindow einfach mal die onBlurs hab z?en lassen, ist mir aufgefallen das ein Klick ausserhalb des ToolFensters IMMER nach 2 Blur Events passiert. Fragt mich nicht warum, aber ich denke das es so ist weil immer erst das Aktive Objekt ein "onBlur" startet und dann nochmal der BODY des Toolwindows selber. Also m?n wir unser "selfmade" onBlur[toolwindow_close()] davon abhalten loszugehen wenn der Blur_counter unter 2 ist. Wenn Opera's Bug loslegt, wird der Counter zu hoch sein. Wir m?n also nur daf?orgen das bei jedem "falschen" Blur (oder verpassten Focus) eines Buttons der Blur_Counter zur?esetzt wird. (Das k?e man sogar durch ein Intervall machen das das st?ig im Hintergrund tut, vorrausgesetzt der CloseDown Timer ist schneller) -> Aufgrund des Bugs, wird Opera den timeout nicht stoppen, aber mit einem zur?esetzten Timer wird das Ereignis trozdem verhindert ;) IM TOOLWINDOW.HTML: Code: var toolwindow_closedown; var toolwindow_bc=0; function toolwindow_reset(){ toolwindow_bc=0; // Reset Blur-Counter (4 Opera) } function toolwindow_close(){ if (toolwindow_bc>1) { // Blur-Counter is at Value 2 when IFrame is left permanently (Opera Fix) document.removeEventListener("blur", toolwindow_blur, true); // avoid event Bubbeling parent.toolwindow_blur(); // call parent event (what will getData and close the Iframe) } } function toolwindow_blur(e) { toolwindow_bc++; //Inc Blur-Counter (4 Opera) window.clearTimeout(toolwindow_closedown); // avoid double Timeouts toolwindow_closedown = window.setTimeout("toolwindow_close()", 100); // launch close-timeout } function toolwindow_focus(e) { window.clearTimeout(toolwindow_closedown); // stop close-timeout } if(document.addEventListener) // Init { document.addEventListener("blur", toolwindow_blur, true); document.addEventListener("focus", toolwindow_focus, true); } button1.onclick="toolwindow_reset();"; Puuhh! Das Funktioniert f?IE6, Firefox, Opera Bitte probiert das BEISPIEL aus und teilt mir mit ob euer Browser meinen Code mag. :P Der Inhalt des Toolwindows ist Teil des OPENWYSIWYG Editors (openWYSIWYG - Open Source Cross-Browser WYSIWYG Editor), und wird hier NUR als Beispiel genutzt! Meine Kurzen Fragen nach einem Langen Post: GEHT DAS AUCH EINFACHER/ELEGANTER/BESSER/ANDERS? WER HATTE ?NLICHE PROBLEME? Und wenn euch das hier hat weiterhelfen k?n w? nett wenn ihr was schreiben k?et. :) Habt Dank f?ure Ideen/Kommentare MfG Huelke