iframe, neue Seite laden, Laden abwarten

[MudGuard]

Hi,

was ich brauche:

per Javascript (kann in diesem Fall als aktiviert vorausgesetzt werden, ebenso wie IE > 5.6, Firefox > 1.0, Opera > 8) sollen aus mehreren HTML-Dokumenten im selben Verzeichnis die Inhalte von Elementen (mit bestimmter Klasse) geholt und ins aktuelle Dokument kopiert werden.

Sinn und Zweck des ganzen:
Anzeigebeispiele (ähnlich wie die bei SelfHTML) - der Pflegeaufwand für die Dokumentation soll reduziert werden, indem der Quelltext der Beispiele aus den Beispielseiten geholt wird.

Mein Ansatz:

per Javascript in einen (unsichtbaren, Javascript-erzeugten) iframe der Reihe nach ein paar HTML-Seiten laden, daraus jeweils den Element-Inhalt eines bestimmten Elements extrahieren und in die eigene Seite kopieren.

Als unproblematisch betrachte ich das Anlegen des iframes sowie das Laden eines Dokuments in diesen iframe.

Auch das Holen der entsprechenden Element-Inhalte sollte kein Problem sein (getElementsByTagName, testen mit className, innerHTML)

Ebenso unproblematisch ist dann das Erzeugen des pre-Elements mit dem entsprechenden TextNode.

Was mir etwas Kopfzerbrechen bereitet, ist das Timing.
Ich kann ja nicht davon ausgehen, daß direkt nachdem dem iframe das neue Dokument zugewiesen wurde dieses Dokument auch schon geladen ist - da liegt ja doch eine gewisse Zeitspanne dazwischen. Ich muß also erkennen können, ob das Dokument im iframe bereits geladen wurde.

Was gibt es da für Möglichkeiten?
Gibt es eine Möglichkeit, die ohne onload-Handler in der im iframe befindlichen Seite auskommt?
Mir sind bis jetzt nur folgende Möglichkeiten eingefallen:

1. in der Seite im iframe wird onload eine Variable erzeugt, deren Existenz kann von der Mutterseite periodisch abgefragt werden, wenn vorhanden, kann weitergemacht werden (leider gibt es ja kein sleep, sondern nur setTimeout/setIntervall, womit das nicht in einer Schleife zu machen ist)

2. die Seite im iframe prüft onload ab, ob sie im frame sitzt (top != self), falls ja, prüft sie auf Existenz einer Funktion im parent und ruft diese ggf. auf

Das iframe-Element hat ja leider kein onload-Attribut, so daß ich dieses nicht nutzen kann, dann wäre wenigstens nichts an der Beispielseite umzubauen ...

Oder hab ich mal wieder was offensichtliches übersehen?

cu,
Andreas

[Jörg Peschke]

Tag

per Javascript (kann in diesem Fall als aktiviert vorausgesetzt werden, ebenso wie IE > 5.6, Firefox > 1.0, Opera > 8) sollen aus mehreren HTML-Dokumenten im selben Verzeichnis die Inhalte von Elementen (mit bestimmter Klasse) geholt und ins aktuelle Dokument kopiert werden.

Mir fällt nur noch AJAX dazu ein, damit könntest Du das ganze ohne das Iframe-Gefummel relativ elegant via XML-Request lösen.
Ist allerdings nicht völlig Cross-Browser-kompatibel.

Viele Grüße,
Jörg

[MudGuard]

Hi,

Tag

per Javascript (kann in diesem Fall als aktiviert vorausgesetzt werden, ebenso wie IE > 5.6, Firefox > 1.0, Opera > 8) sollen aus mehreren HTML-Dokumenten im selben Verzeichnis die Inhalte von Elementen (mit bestimmter Klasse) geholt und ins aktuelle Dokument kopiert werden.

Mir fällt nur noch AJAX dazu ein, damit könntest Du das ganze ohne das Iframe-Gefummel relativ elegant via XML-Request lösen.
Ist allerdings nicht völlig Cross-Browser-kompatibel.

Hm - vor allem stört mich dabei das "http" - ich vermute mal, daß das nicht funktioniert, wenn die Dokumente per file: betrachtet werden ...

cu,
Andreas

[molily]

Hm - vor allem stört mich dabei das "http" - ich vermute mal, daß das nicht funktioniert, wenn die Dokumente per file: betrachtet werden ...

Doch, prinzipiell schon.

Mathias

[MudGuard]

Hi,

Hm - vor allem stört mich dabei das "http" - ich vermute mal, daß das nicht funktioniert, wenn die Dokumente per file: betrachtet werden ...
Doch, prinzipiell schon.

Ups, wo ist meine zweite Antwort ...

Ich habs getestet, und es funktioniert auch über file:
Allerdings bekomme ich weder ein HTML- noch ein XHTML-Dokument als responseXML, sondern nur als responseText ...

Das kann ich dann zwar per document.write in einen iframe oder ein Popup schreiben, aber bei dem Versuch, auf den document tree zuzugreifen, bin ich immer gescheitert (außerdem ist damit auch die timeout-Sache wieder da ...)

Jetzt müssen halt die relevanten Bereiche mit <!-- BSP START --> und <!-- BSP ENDE --> markiert sein - und die hol ich mir dann mit etwas Stringverarbeitung aus dem responseText.

cu,
Andreas

[molily]

Hallo,

Allerdings bekomme ich weder ein HTML- noch ein XHTML-Dokument als responseXML, sondern nur als responseText ...

DOM-Zugriff bekommst du nur, wenn das Dokument ein XML-Dokument ist (siehe).

Jetzt müssen halt die relevanten Bereiche mit <!-- BSP START --> und <!-- BSP ENDE --> markiert sein - und die hol ich mir dann mit etwas Stringverarbeitung aus dem responseText.

Das ist wahrscheinlich sowieso sinnvoller als das Parsen einer externen Datei, um sie gleich wieder zu serialisieren (innerHTML), um den Code als Code in ein Dokument zu schreiben.

Mathias

[molily]

Hallo,

per Javascript in einen (unsichtbaren, Javascript-erzeugten) iframe der Reihe nach ein paar HTML-Seiten laden, daraus jeweils den Element-Inhalt eines bestimmten Elements extrahieren und in die eigene Seite kopieren.

Als unproblematisch betrachte ich das Anlegen des iframes sowie das Laden eines Dokuments in diesen iframe.

Auch das Holen der entsprechenden Element-Inhalte sollte kein Problem sein (getElementsByTagName, testen mit className, innerHTML)

innerHTML gibt einem u.U. nicht exakt den Code wieder, aber die genannten Browser sollten es bei regulärem HTML-Code können, möglicherweise tauchen aber einige Attribute zuviel auf.

Ich kann ja nicht davon ausgehen, daß direkt nachdem dem iframe das neue Dokument zugewiesen wurde dieses Dokument auch schon geladen ist - da liegt ja doch eine gewisse Zeitspanne dazwischen. Ich muß also erkennen können, ob das Dokument im iframe bereits geladen wurde.

Nimm den onload-Event des iframe-Elementobjekts. Dieses fungiert quasi als window-Objekt für das Dokument im iframe, daher kommt dort der load-Event an.

Das iframe-Element hat ja leider kein onload-Attribut

Gemäß HTML vielleicht nicht. Hast du aber mal einen load-Handler beim iframe-Elementknotenobjekt registriert? Das sollte funktionieren.

var iframe = document.createElement("iframe");  
document.body.appendChild(iframe);  
iframe.onload = function (e) { alert("loaded"); };  
iframe.src = "test.html";

Zugriff auf das window-Objekt des Dokuments im iframe bekommt man übrigens über contentWindow (proprietär, MSIE und Gecko), direkten Zugriff auf das document-Objekt über iframe.document (MSIE, Opera) oder iframe.contentDocument (DOM 2 HTML, Opera, Gecko).

Mathias

[MudGuard]

Hi,

Gemäß HTML vielleicht nicht. Hast du aber mal einen load-Handler beim iframe-Elementknotenobjekt registriert? Das sollte funktionieren.

var iframe = document.createElement("iframe");

document.body.appendChild(iframe);
iframe.onload = function (e) { alert("loaded"); };
iframe.src = "test.html";

>   
> Zugriff auf das window-Objekt des Dokuments im iframe bekommt man übrigens über contentWindow (proprietär, MSIE und Gecko), direkten Zugriff auf das document-Objekt über iframe.document (MSIE, Opera) oder iframe.contentDocument (DOM 2 HTML, Opera, Gecko).  
  
Werd ich bei Gelegenheit noch ausprobieren - im Moment funktioniert es erstmal über die String-Manipulation des XMLHTTPRequests ...  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[MudGuard]

Hi,

var iframe = document.createElement("iframe");

document.body.appendChild(iframe);
iframe.onload = function (e) { alert("loaded"); };
iframe.src = "test.html";

  
Mein Code sieht jetzt so aus:  
~~~javascript
var bsploader =  
{  
 iframe: null  
 , init: function()  
  {  
   bsploader.iframe = document.createElement("iframe");  
   document.body.appendChild(bsploader.iframe);  
   bsploader.iframe.onload = bsploader.iframeLoaded;  
   bsploader.iframe.src="test1.html";  
  }  
 , iframeLoaded: function(e)  
  {  
   alert("iframe loaded");  
  }  
}  
window.onload = bsploader.init;

funktioniert im Firefox und im Opera - der alert erscheint.
Im Internet Explorer erscheint der alert nicht - die Seite ist aber im iframe zu sehen.

cu,
Andreas

[MudGuard]

Hi,

Nimm den onload-Event des iframe-Elementobjekts. Dieses fungiert quasi als window-Objekt für das Dokument im iframe, daher kommt dort der load-Event an.

Im Prinzip ja. Im IE krieg ich das nur dann hin, wenn dem iframe der onload-Handler bereits per HTML zugeordnet wurde, nicht, wenn der onload-Handler einem bestehenden iframe angehängt wird und schon gar nicht, wenn der iframe vorher noch erzeugt wird.

Gemäß HTML vielleicht nicht. Hast du aber mal einen load-Handler beim iframe-Elementknotenobjekt registriert? Das sollte funktionieren.

Sollte. Tut es in richtigen Browsern auch, aber nicht im IE.

Ich hab schon folgendes probiert:

ifr = document.createElement("iframe");

ifr.onload=myfunction;
ifr.onload=function(e) { myfunction(); }
ifr.onload=function(e) { myfunction(e); }
ifr.contentWindow.onload=myfunction;
ifr.contentWindow.onload=function(e) { myfunction(); }
ifr.contentWindow.onload=function(e) { myfunction(e); }
ifr.setAttribute("onload", myfunction }
ifr.setAttribute("onload", "myfunction();" }
ifr.setAttribute("onload", "myfunction(e);" }

Gibt es noch andere Methoden im IE, um einem Element einen eventhandler zuzuordnen?

cu,
Andreas

[MudGuard]

Hi,

folgendes funktioniert zumindest in den IE ab 5.5, Opera ab 7.53 und Geckos ab 1.0.1:

ifr = document.createElement("iframe");

if (ifr.attachEvent)
    ifr.attachEvent("onload", myfunction);
else
    ifr.onload = myfunction;

Ältere Geckos/Operas hab ich nicht mehr zum testen, IE 5.0 scheint nicht zu funktionieren, der kennt zwar attachEvent, ruft aber die zugewiesene Funktion nicht auf.

cu,
Andreas

[molily]

Hallo,

ifr = document.createElement("iframe");

ifr.onload=myfunction;

Ich habe hier leider keinen IE und hatte mit einem fremden Rechner getestet, daher kann ich dir gerade nicht weiterhelfen.
Soweit ich mich erinnern kann, hat die Reihenfolge eine Rolle gespielt. Also Element erzeugen, dann das Element direkt einhängen, dann den load-Handler vergeben, dann den src setzen. Insbesondere das Vertauschen von Einhängen und Handler vergeben führte dazu, dass es nicht mehr klappte.

Ich werde mir das in den nächsten Tagen noch einmal ansehen.

Mathias

[MudGuard]

Hi,

Soweit ich mich erinnern kann, hat die Reihenfolge eine Rolle gespielt. Also Element erzeugen, dann das Element direkt einhängen, dann den load-Handler vergeben, dann den src setzen. Insbesondere das Vertauschen von Einhängen und Handler vergeben führte dazu, dass es nicht mehr klappte.

Richtig, die Reihenfolge ist kritisch (ich hab alle möglichen und unmöglichen Reihenfolgen ausprobiert, die von Dir beschriebene ist eine, die funktioniert).
Und für den IE den Handler mit attachEvent setzen, nciht mit onload = (im Gecko genau umgekehrt) ...

Aber im 5.0er IE geht's trotzdem nicht.
Selbst wenn - ich hab für den IE 5.0 noch was mit setTimeout gebastelt - aber ich komm dann nicht ans document ran - ifr.document existiert zwar, ist aber dasselbe Dokument wie self.document, also das der Seite, die den iframe enthalten sollte.
Auch über self.frames[0] geht nichts ...

cu,
Andreas