IFrame eventhandler hinzufügen
0 
molily
IFrame eventhandler hinzufügen
Hi,
Ich habe einen iframe namens frmEditor und diesem möchte ich für onkeyup gerne einen eventhandler hinzufügen beim seite laden (des parents)
Habe diese Varianten versucht:
document.getElementById("frmEditor").attachEvent("onkeyup", setValueFromEditor, false);
und
frmEditor.document.onkeyup = setValueFromEditor;
die handlerfunktion:
function setValueFromEditor(){
alert("");
}
Keines klappt aber.
Kann es sein dass ein iframe keinen onkeyup event besitzt. Kann man es trotzdem realisieren?
-
Hallo,
Kann es sein dass ein iframe keinen onkeyup event besitzt. Kann man es trotzdem realisieren?
Wahrscheinlich willst du nicht den iframe-Elementknoten ansprechen, sondern das Dokument *im* iframe und dort dokumentweit Tastendrücke überwachen.
Ausgehend von dem iframe-Elementknoten kommst du so zum enthaltenen Dokument:
var iframe = document.getElementById("frmEditor"); var iframeDocument = iframe.document || iframe.contentDocument; // je nach Browser über die eine oder die andere Eigenschaft iframeDocument.onkeyup = setValueFromEditor;Allerdings musst du beachten, dass der Anwender dazu den iframe fokussiert haben muss (z.B. durch einen Klick in den iframe), sonst passieren die Tastendrücke natürlich im Parent-Dokument. Vielleicht schilderst du deine Anforderungen noch mal genauer.
Mathias
-
Allerdings musst du beachten, dass der Anwender dazu den iframe fokussiert haben muss (z.B. durch einen Klick in den iframe), sonst passieren die Tastendrücke natürlich im Parent-Dokument. Vielleicht schilderst du deine Anforderungen noch mal genauer.
Mathias
Hi Mathias
Vielen Dank, das passt schon. Ich möchte den Iframe als Editor in Kombination mit
frmEditor.document.designMode = "On";
verwenden. Von daher wär das schon das wo ich brauche denke ich.Besten Dank
-
Hi
Leider funktioniert das nicht so wie erhofft:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function init(){ frmEditor.document.designMode = "On"; try{ var iframe = document.getElementById("frmEditor"); var iframeDocument = iframe.document || iframe.contentDocument; // je nach Browser über die eine oder die andere Eigenschaft iframeDocument.onkeyup = setValueFromEditor; }catch(e){alert(e.message);} } function setValueFromEditor(){ alert("test"); } </script> </head> <body onload="init();"> <iframe id="frmEditor" frameborder="1" width="200px" height="300px"></iframe> </body> </html>Wenn ich im iframe eine Taste drücke passiert nix, im parent allerdings kommt der alert
-
Hallo,
Leider funktioniert das nicht so wie erhofft:
Was hast Du genau vor? Willst Du wirklich ein multifunktionales JavaScript-WYSIWYG-Editor-Control, welches auch noch in vielen Browsern läuft, selbst schreiben? Das halte ich für brotlose Kunst. Es gibt TinyMCE.
Wenn Du allerdings nur einige wenige Funktionen bereitstellen willst, kannst Du meinen Ansatz weiterverwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>IFrame im Designmode für aktuelle IE, FireFox und Opera</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript"> <!-- [code lang=javascript]function watchFormats(editorDoc) { //Diese Funktion kann als Voraussetztung für die Anzeige des aktuellen Formats der //Markierung bzw. Textcursorposition genutzt werden. var format = ""; format += editorDoc.queryCommandValue('fontname') + " "; format += editorDoc.queryCommandValue('fontsize') + " "; if (editorDoc.queryCommandState('bold')) format += "bold "; if (editorDoc.queryCommandState('italic')) format += "italic "; if (editorDoc.queryCommandState('underline')) format += "underline "; document.getElementById('tf').value = format; } function shortCuts(e, editorWindow, editorDoc) { if(!e && editorWindow.event) e = editorWindow.event; if (e.which && e.altKey && e.ctrlKey) { //Strg+Alt+B für FireFox if (e.which==98) editorDoc.execCommand('bold', false, null); //Strg+Alt+I für FireFox if (e.which==105) editorDoc.execCommand('italic', false, null); //Strg+Alt+U für FireFox if (e.which==117) editorDoc.execCommand('underline', false, null); } else if (e.keyCode) { //IE nutzt die Shortcuts Strg+Shift+B, Strg+Shift+I, Strg+Shift+U von sich aus //Opera nutzt die Shortcuts Strg+B, Strg+I, Strg+U von sich aus window.status = "" + e.keyCode + e.ctrlKey + e.altLeft + e.altKey; } } window.onload = function() { //Initialisieren des IFrames var editorWindow = document.getElementById('editor').contentWindow; var editorDoc = editorWindow.document; editorDoc.designMode="on"; //Initialisieren der Shortcuts if(editorDoc.addEventListener) { editorDoc.addEventListener('keypress', function(e) {shortCuts(e, editorWindow, editorDoc);}, true); } else { editorDoc.onkeypress = function(e) {shortCuts(e, editorWindow, editorDoc);}; } //Initialisieren der Buttons document.getElementById("fett").onclick = function() { editorDoc.execCommand('bold', false, null); }; document.getElementById("kursiv").onclick = function() { editorDoc.execCommand('italic', false, null); }; document.getElementById("unterstrichen").onclick = function() { editorDoc.execCommand('underline', false, null); }; //Initialisieren der Formatierungsüberwachung window.setInterval(function() {watchFormats(editorDoc);}, 100); }; ~~~//--> </script> </head> <body> <h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1> <p><button id="fett">Fett</button> <button id="kursiv">Kursiv</button> <button id="unterstrichen">Unterstrichen</button></p> <p><label>aktuelles Format </label><input type="text" id="tf" value="" size="50" maxlength="50"></p> <p>Hier Text eingeben:</p> <iframe id="editor" width="400" height="100"></iframe> <p><textarea rows="5" cols="50" id="ta"></textarea></p> <button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button> </body> </html> [/code] viele Grüße Axel-
Wenn Du allerdings nur einige wenige Funktionen bereitstellen willst, kannst Du meinen Ansatz weiterverwenden:
Darum gehts eigentlich. Ich halte alle verfügbaren für überladen und will nur ein -->wenig<-- formatierungsmöglichkeit bieten
window.onload = function() {
//Initialisieren des IFrames
var editorWindow = document.getElementById('editor').contentWindow;
var editorDoc = editorWindow.document;
editorDoc.designMode="on";//Initialisieren der Shortcuts
if(editorDoc.addEventListener) {
editorDoc.addEventListener('keypress', function(e) {shortCuts(e, editorWindow, editorDoc);}, true);
} else {
editorDoc.onkeypress = function(e) {shortCuts(e, editorWindow, editorDoc);};
}Ich hab versucht das in meinen Code zu übernehmen, kriege allerdings die Meldung, dass das Objekt die Methode oder das Attribut nicht unterstützt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function init(){ frmEditor.document.designMode = "On"; var editorWindow = document.getElementById('frmEditor').contentWindow; var editorDoc = editorWindow.document; editorDoc.addEventListener('keypress', setValueFromEditor, false); } function setValueFromEditor(){ alert("test"); } </script> </head> <body onload="init();"> <iframe id="frmEditor" frameborder="1" width="200px" height="300px"></iframe> </body> </html>-
Hallo,
Darum gehts eigentlich. Ich halte alle verfügbaren für überladen und will nur ein -->wenig<-- formatierungsmöglichkeit bieten
Aha, und das auch nur für den IE, wie es aussieht.
Ich hab versucht das in meinen Code zu übernehmen, kriege allerdings die Meldung, dass das Objekt die Methode oder das Attribut nicht unterstützt:
Ja, weil Du die Methode für die vollständig DOM-konformen Browser und _nur_ diese dem IE aufzwingen willst.
Nur für den IE ist:
function init(){ var editorWindow = document.getElementById('frmEditor').contentWindow; var editorDoc = editorWindow.document; editorDoc.designMode = "On"; editorDoc.onkeypress = setValueFromEditor; } function setValueFromEditor(){ alert("test"); }viele Grüße
Axel
-
Hallo,
Darum gehts eigentlich. Ich halte alle verfügbaren für überladen und will nur ein -->wenig<-- formatierungsmöglichkeit bieten
Aha, und das auch nur für den IE, wie es aussieht.Vorerst einmal ja. Besten Dank für die Hilfe, klappt wunderbar. War wohl schon etwas müde und hab das mit dem addEventListener übersehen. Ich denke mit attachEvent ginge es ebenso?
Ciao
-
-
-
-
-