Popup dynamisch füllen

[Deus Figendi]

Guten Abend!
Bisher habe ich beim Debuggen stehts 'ne Menge alert()s ausgegeben mit allen möglichen Informationen, die ich fürs Debugging für nützlich hielt. Inzwischen bin ich das ganze weg-klicken von Informationen, die ich eh erwartet habe aber leid, daher such(t)e ich nun nach einem neuen Weg.
Am Beginn meines Codes wird eine Variable namens debug_ob deklariert anhand derer ich debug-Informationen einblende oder eben nicht. Bisher geschah dies an diversen Stellen des Codes mit
if(debug_on) { alert("Unglaublich wichtige Debug-Information"); }
Wie gesagt bin ich die Meldungen aber leid, vor allem da es recht viele geworden sind (aber auch weil manche nicht auf meinen Monitor passen).
also habe ich einfach alle Meldungen an eine Funktion übergeben, also überall wo das da oben stand steht jetzt debug_message("Unglaublich wichtige Debug-Information"); und die Prüfung ob debugging überhaupt aktiv ist erfolgt dann in dieser Funktion.

Erster Ansatz war dann, dass ich eine ul(iste) erstellte, die ich dann position:fixed in die Ecke links unten geklebt habe. Funktionierte ansich gut, aber wenn es viele Meldungen wurde, dann wurde es auch unübersichtlich, verdeckte Content oder wurde von diesem verdeckt.

Mein neuer Ansatz ist jetzt einfach ein Extrafenster, in dem die Informationen stehen, das kann ich prima ignorieren bzw. durchscrollen oder sonst was. Aber das will nicht so recht klappen. Hier die Funktion:

//(...)  
var debug_on = true;  
var debug_window = false;  
//(...)  
  
function debug_message (db_message) {  
	if (debug_on) {  
		if (!debug_window) {  
			debug_window = window.open('','debug_window','dependent=yes,resizable=yes,scrollbars=yes,status=yes');  
			var debug_html = document.createElement("html");  
			var debug_body = document.createElement("body");  
			var debug_ul = document.createElement("ul");  
			debug_ul.style.fontSize = "x-small";  
			debug_ul.id = "debug_list";  
			debug_body.appendChild(debug_ul);  
			debug_html.appendChild(debug_body);  
			debug_window.document.appendChild(debug_html);  
		}  
		var debug_li = document.createElement("li");  
		var debug_tx = document.createTextNode(db_message);  
		debug_li.appendChild(debug_tx);  
		debug_ul.appendChild(debug_li);  
	}  
}  
//(...)

wenn ich diese Funktion aufrufe erscheint ein bildschirmfüllendes (das ist okay) Fenster ohne Inhalt und die Fehlerkonsole schimpft ich dürfe das Element (html) nicht an dieser Stelle der Hierarchie platzieren.
$Fehler: "Node cannot be inserted at the specified point in the hierarchy"
Wie mache ich das richtig oder
wo kann ich nachlesen wie ich das richtig mache oder
hat jemand einen alternativen Vorschlag zum Popup um meine Debug-Informationen anzuzeigen.

Vielen Dank schonmal und schönen Abend noch

[ChrisB]

Hi,

wenn ich diese Funktion aufrufe erscheint ein bildschirmfüllendes (das ist okay) Fenster ohne Inhalt und die Fehlerkonsole schimpft ich dürfe das Element (html) nicht an dieser Stelle der Hierarchie platzieren.
$Fehler: "Node cannot be inserted at the specified point in the hierarchy"

Das liegt daran,

  	debug\_window = window.open('','debug\_window','dependent=yes,resizable=yes,scrollbars=yes,status=yes');  
  	var debug\_html = document.createElement("html");  
  	var debug\_body = document.createElement("body");  

das du hier Elemente im *aktuellen* Dokument erzeugst -

  	debug\_window.document.appendChild(debug\_html);  

• und dann hier aber versuchst, sie in ein *anderes* Dokument einzuhängen.

Wenn also debug_window.document die Referenz auf das document-Element deines Popup-Fensters ist - dann erzeuge die Elemente auch in dessen Kontext, in dem du *seine* Methode createElement dazu benutzt.

MfG ChrisB

[Deus Figendi]

Hmm klingt logisch, aber der Fehler tritt weiterhin auf obwohl ich das Script entsprechend angepasst habe:

function debug_message (db_message) {  
	if (debug_on) {  
		if (!debug_window) {  
			debug_window = window.open('','debug_window','dependent=yes,resizable=yes,scrollbars=yes,status=yes');  
			var debug_html = debug_window.document.createElement("html");  
			var debug_body = debug_window.document.createElement("body");  
			var debug_ul = debug_window.document.createElement("ul");  
			debug_ul.style.fontSize = "x-small";  
			debug_ul.id = "debug_list";  
			debug_body.appendChild(debug_ul);  
			debug_html.appendChild(debug_body);  
			debug_window.document.appendChild(debug_html);  
		}  
		var debug_li = debug_window.document.createElement("li");  
		var debug_tx = debug_window.document.createTextNode(db_message);  
		debug_li.appendChild(debug_tx);  
		debug_ul.appendChild(debug_li);  
	}  
}

und zwar an dieser Stelle:
debug_window.document.appendChild(debug_html);

(Ich habe probehalber auch mal alle Variablen global deklariert, aber das hilft leider auch nicht)

[bleicher]

Grüße,

debug_window.document.appendChild(debug_html);

was passiert wenn du den "document" da weglässt?
MFG
bleicher

[Deus Figendi]

Grüße,
» debug_window.document.appendChild(debug_html);

was passiert wenn du den "document" da weglässt?

$Fehler: "debug_window.appendChild is not a function"

[Felix Riesterer]

Lieber Deus Figendi,

if (!debug_window) {
            debug_window = ...
            var debug_ul = ...
            ...
        }
        var debug_li = debug_window.document.createElement("li");
        ...
        debug_ul.appendChild(debug_li);

fällt Dir was auf?

Liebe Grüße,

Felix Riesterer.

[Deus Figendi]

fällt Dir was auf?

Eigentlich nichts Felix...
Ich kann nur vermuten, dass du ansprichst dass ich mal lokale und mal globale Variabeln gewählt habe... das tat ich durchaus bewusst nur debug_window muss (mit seinen Kindern natürlich) nach dem Ende der Funktion bzw. beim nächsten Aufruf noch existieren. Aber ich habe auch schon versucht alle Variablen global zu deklarieren, das half leider nicht.

Falls es das nicht war hilf mir doch bitte auf die Sprünge, was mir hätte auffallen sollen.

[Felix Riesterer]

Lieber Deus Figendi,

|         if (!debug_window) {
|             debug_window = ...
|             var debug_ul = ...
|             ...
|         }
|         var debug_li = debug_window.document.createElement("li");
|         ...
|         debug_ul.appendChild(debug_li);
|
| fällt Dir was auf?
Eigentlich nichts Felix...

dann frage Dich einmal, wie Du debug_ul etwas anhängen kannst, wenn die if-Bedingung nicht erfüllt, und somit das <ul>-Element nicht erzeugt wurde...

Liebe Grüße,

Felix Riesterer.

[Struppi]

und zwar an dieser Stelle:
debug_window.document.appendChild(debug_html);

So wie ich das sehe, geht das so nicht. Vermutlich weil es kein wirkliches Dokument gibt. Das Fenster ist ja leer, das bedeutet, du musst das Fenster erstmal mit einem HTML Grundgerüst beschreiben und dann kannst du einfügen was du willst.

Struppi.

[Deus Figendi]

So wie ich das sehe, geht das so nicht. Vermutlich weil es kein wirkliches Dokument gibt. Das Fenster ist ja leer, das bedeutet, du musst das Fenster erstmal mit einem HTML Grundgerüst beschreiben und dann kannst du einfügen was du willst.

Hm ich dachte indem ich ein html- und ein body-Element erzeuge erzeuge ich auch ein Grundgerüst (ich hatte irgendwie im Kopf, dass <head> auch Pflicht sei, daher habe ich auch dieses probehalber mal erzeugt, nützt leider auch nichts).

Das Einzige was mir einfallen würde ist ein "Grundgerüst" mit write() zu schreiben und anschließend die Elemente über ihre id wieder zu greifen und zu füllen... hmm ich glaube das probiere ich :)

[Struppi]

» So wie ich das sehe, geht das so nicht. Vermutlich weil es kein wirkliches Dokument gibt. Das Fenster ist ja leer, das bedeutet, du musst das Fenster erstmal mit einem HTML Grundgerüst beschreiben und dann kannst du einfügen was du willst.
Hm ich dachte indem ich ein html- und ein body-Element erzeuge erzeuge ich auch ein Grundgerüst (ich hatte irgendwie im Kopf, dass <head> auch Pflicht sei, daher habe ich auch dieses probehalber mal erzeugt, nützt leider auch nichts).

Ich bezog mich eher auf das window.document. da das popup leer ist, ist es nicht definiert, woher window.document kommt.

Das Einzige was mir einfallen würde ist ein "Grundgerüst" mit write() zu schreiben und anschließend die Elemente über ihre id wieder zu greifen und zu füllen... hmm ich glaube das probiere ich :)

Es reicht das Grundgerüst html und body zu schreiben und dann mit document.body.appendChild() das Element einzufügen.

Struppi.

[Deus Figendi]

Es reicht das Grundgerüst html und body zu schreiben und dann mit document.body.appendChild() das Element einzufügen.

Nö, will auch nicht:

function debug_message (db_message) {  
	if (debug_on) {  
		if(!debug_window) {  
			debug_window = window.open('','debugwindow','dependent=yes,resizable=yes,scrollbars=yes,status=yes');  
			debug_window.document.open();  
			debug_window.document.write('<html> <body></body> </html>');  
			debug_window.document.close();  
		}  
	}  
}

Aber jetzt wird's lustig: Der Fehler den ich erhalte ist _leer_! Die Fehlerkonsole meint dazu:

Fehler:
Quelldatei: script.js
Zeile: 0

Na das ist hilfreich -.-
Wenn ich open und close weglasse kommt

Fehler: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLDocument.write]
Quelldatei:  script.js
Zeile: 52

Wobei Zeile 52 die write-Funktion ist.
Dieser Fehler sagt mir allerdings nicht viel, ich habe doch gar keinen Pointer verwendet... naja schon... irgendwie... (eigentlich sind es ja Variablen bzw. Objekte) aber was ist "NS"?

Oder hat document irgendeinen Constructer? So wie ich es handhabte ging ich ja einfach davon aus, dass window.open automatisch eine document-Instanz erzeugt. Mag natürlich sein dass das window-Objekt noch eine .createDocument-Methode hat oder sowas, aber ich konnte nichts derartiges in der Objektrefferenz des self entdecken.

[Struppi]

Aber jetzt wird's lustig: Der Fehler den ich erhalte ist _leer_! Die Fehlerkonsole meint dazu:

Fehler:
Quelldatei: script.js
Zeile: 0

Na das ist hilfreich -.-
Wenn ich open und close weglasse kommt

Fehler: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLDocument.write]
Quelldatei:  script.js
Zeile: 52

Wobei Zeile 52 die write-Funktion ist.

Kann ich nicht nachvollziehen, bei mir (FF 3) läuft der Code ohne Fehlermeldung.

Struppi.

[Deus Figendi]

Kann ich nicht nachvollziehen, bei mir (FF 3) läuft der Code ohne Fehlermeldung.

Hm naja, liegt vielleicht irgendwie daran dass ich Greasemonkey benutze (also das Script ein GM-Script ist). Ich weiß es nicht. Ist aber auch egal, Christians Vorschlag scheint zu funktionieren.
Dennoch danke für deine Hilfestellung.

[Struppi]

» Kann ich nicht nachvollziehen, bei mir (FF 3) läuft der Code ohne Fehlermeldung.
Hm naja, liegt vielleicht irgendwie daran dass ich Greasemonkey benutze (also das Script ein GM-Script ist). Ich weiß es nicht. Ist aber auch egal,

Hier dein Code als Beispiel: http://selfhtml.jstruebig.de/Popup dynamisch füllen.html

..Christians Vorschlag scheint zu funktionieren.

im Firefox. Es wird schwierig, wenn du auch in anderen Browsern testen willst. Ich lass mir Debugmeldungen meistens in einer Textarea ausgeben, die ich am Ende der Seite platzieren (wobei es da aber auch andere Möglichkeiten gibt)

Struppi.

[Christian]

Guten Abend!

Ebenso.

Bisher habe ich beim Debuggen stehts 'ne Menge alert()s ausgegeben mit allen möglichen Informationen, die ich fürs Debugging für nützlich hielt.

hat jemand einen alternativen Vorschlag zum Popup um meine Debug-Informationen anzuzeigen.

Firefox und das Addon Firebug installieren. Über das Objekt console kannst du im JS dann so ziemlich alles in der Konsole ausgeben. http://getfirebug.com/logging.html

Guten Abend!

Christian

[Struppi]

Firefox und das Addon Firebug installieren. Über das Objekt console kannst du im JS dann so ziemlich alles in der Konsole ausgeben. http://getfirebug.com/logging.html

Das hilft nicht viel weiter und es geht auch völlig ohne Firebug, die Konsole zeigt einen entsprechenden Fehler an:

Fehler: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy"  code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)"  location: "../test.html Line: 25"]

Struppi.

[Struppi]

» Firefox und das Addon Firebug installieren. Über das Objekt console kannst du im JS dann so ziemlich alles in der Konsole ausgeben. http://getfirebug.com/logging.html

Das hilft nicht viel weiter

... ja ok, es ging gar nicht um das Problem. Mein Fehler.

Struppi.

[Deus Figendi]

Über das Objekt console kannst du im JS dann so ziemlich alles in der Konsole ausgeben.

Ich finde den Vorschlag super! Als ich ihn gestern las habe ich ihn nicht verstanden, jetzt aber schon und ich mag ihn.
Es scheint noch Problemchen zu geben, aber die versuche ich erstmal selber in den Griff zu bekommen.