Daniel N.: Bild in Popup-Laden

Hallo,

ich möchte auf einem Thumbnail-Bild in einer Seite per Javascript ein Popup öffnen und in diesem eine größere Version dieses Bildes laden.

Dabei habe ich ein Verhalten / einen Fehler beobachtet, den ich mir nicht erklären kann. Ich hoffe, ihr könnt mir weiterhelfen!

Die HTML-Seite sieht wie folgt aus:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" id="top">  
  
<head>  
<title>Script-Test Popup</title>  
  
<script type="text/javascript">  
var ausgabe;  
var bigImage;  
  
// erzeug eine neues Fenster und laedt das angegebene Bild  
function bildGross (imagePath) {  
  
 ausgabe = window.open("bild-gross.html", "Test", "width=800,height=800,resizable=no");  
  
 alert("Test " + ausgabe.document.getElementById("bildGross"));  
 bigImage = ausgabe.document.getElementById("bildGross");  
  
 bigImage.src = imagePath;  
  
 ausgabe.focus();  
}  
  
</script>  
</head>  
  
<body>  
  
  
<h1>Script-Test für ein Popup</h1>  
  
<p><img src="images/glockenturm.jpg"  
 onclick="bildGross('images-large/glockenturm.jpg')" /></p>  
  
</body>  
</html>  
  

Die zu öffnende Datei sie so aus:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
<title>Großes Bild</title>  
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
  
<body">  
  
<div id="bildBox"><a href="javascript:this.close()">  
 <img id="bildGross" alt="grosses Bild" src="blank" /></a></div>  
  
<p style="text-align:center;">  
<button name="buttonClose" type="button" onclick="window.close();">  
Fenster schliessen</button>  
</p>  
  
</body>  
</html>  
  

Mit dem alert im Script funktioniert es, d. h. das Bild wird im Popup angezeigt. Das alert gibt allerdings "Test null" aus.
Nehme ich das alert raus, wird kein Bild mehr angezeigt.

Habt ihr eine Erklärung oder Lösung dafür?

Vielen Dank und viele Grüße
Daniel

  1. hi,

    ausgabe = window.open("bild-gross.html", "Test", "width=800,height=800,resizable=no");

    alert("Test " + ausgabe.document.getElementById("bildGross"));
    bigImage = ausgabe.document.getElementById("bildGross");

    Du täuschst dich, wenn du annimmst, der Browser hätte das Dokument im Popup unbedingt schon geladen und gerendert, wenn du in den direkt darauffolgenden Zeilen schon darauf zuzugreifen versuchst.

    Schreibe entweder den Inhalt des Popups gleich mit Javascript in dieses rein - dann sollte der Browser damit fertig sein, bevor er mit den nächsten Anweisungen weitermacht - oder triggere den weiteren Zugriff über den onload-Event des Popups.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo,

      Schreibe entweder den Inhalt des Popups gleich mit Javascript in dieses rein - dann sollte der Browser damit fertig sein, bevor er mit den nächsten Anweisungen weitermacht - oder triggere den weiteren Zugriff über den onload-Event des Popups.

      Danke, ich habe es über das onload-Event gemacht, damit klappt nun alles.

      Viele Grüße
      Daniel