Onload event non exécuté sur une popup

**kap** · 30/04/2014, 17h14

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !!

**feecochette** · 02/05/2014, 13h49

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".

**kap** · 02/05/2014, 18h11

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

Onload event non exécuté sur une popup

jQuery

Vue hybride

Discussions similaires

Partager

Partager