Onload event non exécuté sur une popup

Version imprimable

Bonjour à tous,

Mon objectif est de pouvoir à partir d'une page mère créer une nouvelle page contenant une image (contenu dynamique). Après avoir fait plusieurs tests, je me suis finalement appuyé sur la discussion suivante :
http://www.developpez.net/forums/d14...pup-page-mere/

Voici mon code :

Javascript page mère :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html2canvas($("#map_canvas"), { useCORS: true, proxy: "/maps/1/export/", onrendered: function(canvas) { var url = canvas.toDataURL(); myWindow = window.open("/maps/openExport/","_blank"); myWindow.onload = function(e) { alert("ready"); myWindow.changeimg(url); }; mapUI.hideLoader(); } });
Ma page fille :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!DOCTYPE html> <html> <script type="text/javascript"> function changeimg(img){ alert("changeimg"); image = document.getElementById("bob"); image.src = img; } </script> <head> <title>Export map</title> </head> <body> <p>Right click on the image to save it.</p> <br> <img id='bob' src='/static/images/image1.png'/> </body> </html>
Le code s'exécute bien sous Chrome Desktop. Par contre j'ai un problème avec Chrome sous IPad. A aucun moment je ne rentre dans le onload... Avez-vous une explication et une solution? Merci d'avance !!

02/05/2014, 13h49
feecochette

Bonjour,

Tu veux lier l’événement "onload" de ton objet "myWindow" à une fonction après l'avoir ouvert et chargé donc après que l’événement "onload" ce soit déroulé, voila pourquoi cela ne marche pas.

Le mieux à faire serait que ta page "/maps/openExport/" lie et écoute l’événement "onload" comme dans la balise "BODY" ou encore un petit "windows.onload".

Merci pour votre réponse. Suite à votre message, j'ai apporté quelques modifications à mon code. Je passe dorénavant bien dans le onload de la fenêtre fille. Cependant j'ai un problème de communication entre la fenêtre mère et la fenêtre fille. Voici le nouveau code :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
html2canvas($("#map_canvas"), {
	useCORS: true,
	proxy: "/maps/1/export/",
	onrendered: function(canvas) {
 
		myWindow = window.open("/maps/openExport/","_blank");
		myWindow.exportURI = canvas.toDataURL();
		mapUI.hideLoader();
	}
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE html>
<html>
<script type="text/javascript"> 
 
    function changeimg(){
                alert("changeimg");
     
                image = document.getElementById("bob");
                image.src = "http://0-3.bnp-geolab.appspot.com/static/images/image2.png";
                alert(self);
                alert(self.exportURI);
                image.src =  self.exportURI; 
    }
    window.addEventListener('load', changeimg, false);
    
</script>
 
    <head>
        <title>Export map</title>
    </head>
    <body>
        <p>Right click on the image to save it.</p>
        <br>
        <img id='bob' src='/static/images/image1.png'/>
        <button id="click" onclick="changeimg();">Click</button>
    </body>
</html>

Le problème est toujours sous Chrome en IPad. Le "alert(self.exportURI)" n'est pas effectué. Si je fais un "alert(window.exportURI)", cela me renvoie "undefined".
J'ai aussi tenté en passant mon data-uri dans le DOM de la fenêtre mère mais un alert du opener me renvoyait une valeur nulle...

Auriez-vous des idées?