Discussion :

[Kogratte]

Bonjour à tous!

Premier post sur ce forum pourtant régulièrement consulté, pour chercher un peu d'aide devant un souci qui me semble 'insoluble'.

Pour faire simple, je bosse sur un site monté en parallèle avec un autre prestataire, car le client final n'a pas su choisir entre nous; du coup il utilisera les fonctionnalités de l'un, et celles de l'autre, le tout de manière transparente pour l'utilisateur final. Cela implique bien une synchro des données, mais ce n'est pas ce qui pèche.

Si certaines pages sont chez nous, et d'autres chez le prestataire tiers, il arrive aussi que certaines pages du prestataire tiers embarque des bouts de page de chez nous, la réciproque étant vraie également.

Ainsi, sur la page d'accueil du site, pour un membre connecté, il n'y a pas moins de 6 iframes correspondant à des services fournis par l'autre prestataire. Je sais, c'est moche les iframes, mais je ne suis pas le décideur technique, juste la paire de main qui doit faire au mieux.

Je vais maintenant vous expliquer un peu le fonctionnement de ce système, le contexte étant posé.

Une fois authentifié sur nos services, l'utilisateur est redirigé sur la homepage (HP par la suite), qui contient donc les 6 iframes.
Avant de charger une page distante du prestataire, je dois m'assurer que la connexion est également établie sur son service; j'ai donc un premier appel ajax qui se charge de vérifier la connexion chez lui.
Une fois la connexion établie et vérifiée, je peux charger les pages distantes, contenues donc dans mes iframes.

Au lieu de faire 6 vérifications, correspondant aux 6 iframes, mais qui peuvent s'avérer trèèèèèès lourdes (je peux aussi en avoir plusieurs centaines), je part du principe que j'ai Ni iframe à charger.

En arrivant sur la page, j'ai Nr iframe prêtes à êtres chargées. Quand une iframe arrive en mode 'ready', je reçoit dans ma page mère un évènement me signalant que l'iframe est prête à être chargée.

Quand j'ai reçu autant de signaux 'ready' que j'ai d'iframe sur ma page (Ni == Nr), c'est que toutes les iframes sont prêtes, je vérifie donc à ce moment la que la connexion est établie auprès du prestataire.
Si je reçois une réponse positive, je parcours l'ensemble de mes iframes, et j'appelle dessus la méthode loadPage, qui se contente de faire un window.location sur la page distante.


Dans la page principale, j'ai le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Nombre d'iframe ready */
var iframeReady = 0;
/* Sécurité pour pas que les iframes se chargent si je n'ai pas encore calculé le iframeToWait et que je reçoit déjà un iframeReady */
var iframeToWait = 999; 
$(document).bind('iframeReady', function() {
		iframeReady++;
		if (iframeReady == iframeToWait) {
			$(document).unbind('iframeReady');
			checkPLConnected();
		}
	});
 
$(document).ready(function() {
	iframeToWait = $('.iframe_selector').size();
});

La fonction checkPlConnected se charge de vérifier auprès du prestataire que l'utilisateur y est authentifié. Cette fonction ne nous intéresse pas, son callback, oui. Le voici.

Code :

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

1
2
3
4
5
6
7
function runFrames(item) {
    if (!item) item = document;
    $(item).find('.iframe_selector')
        .each(function() {
          this.contentWindow.loadPage(); 
        });
}

Comme je vous disais, je parcours l'ensemble de mes iframes et j'appelle la méthode loadPage, qui est bien censée exister (j'utilise le mot censée car c'est la que j'ai bien un souci).

Tout ce joli petit code est présent dans mon document principal.

Dans chaque iframe, le code suivant est présent :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type='text/javascript'>
	function loadPage() {
	   window.location = '<?php echo $redirectToIframe ?>';
	}
	$(document).ready(function() {
		parent.$(parent.document).trigger('iframeReady'); 
		parent.$(parent.document).trigger('riframeReady');		
	});
</script>

J'y déclare la fonction loadPage en charge de rediriger vers la page finale, et une fois que l'iframe arrive en mode 'ready', je throw un évènement 'iframeReady' (et aussi un event 'riframeReady', mais qui ne sert à rien dans le cas présent) dans le parent (la page principale).

Le souci que j'ai, est que parfois, sur chaque navigateur, il est possible que tout ne fonctionne pas comme sur des roulettes.

Ce qui se passe est que je reçoit bien les events 'iframeReady', mais qu'une fois que j'ai la confirmation de la connexion auprès du presta et que j'essaye de rediriger mes iframes, quand je passe dans la boucle qui fait les loadPage, j'ai l'erreur suivante :

this.contentWindow.loadPage is not a function (Firebug extract, mais j'ai la même chose sous Chrome ou IE)


Comment puis je throw le 'iframeReady' et ensuite ne pas avoir la fonction loadPage, pourtant déclarée AVANT?

Ca fait deux heures que je suis la dessus, a triturer toutes les options dans tout les sens, mais la je pèche!

[NoSmoking]

Bonjour,
$(parent.document).parent(); ne serait pas plus approprié ?

[Kogratte]

Le souci n'est pas que je ne reçois pas mes events, au contraire, je les reçois tous. En revanche, j'ai le message 'undefined function' qui peut apparaître ensuite..

[NoSmoking]

que vaut le this dans la fonction runFrames ?

[Kogratte]

Bonjour NoSmoking!

Désolé de cette réponse tardive, semaine très chargée!

Voila les infos que tu souhaites :

Code :

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
 
 
function runFrames(item) {
    if (!item) item = document;
 
    $(item).find(selector)
        .each(function() {
             console.log(this);
             this.contentWindow.loadPage();
        });
}
 
 
<iframe class='plLoggedIn' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=connectArea'></iframe>
<iframe frameborder='0' scrolling='no' class='plTrendingTopicsWithTitle' src='/ressources/template/getPLFrame.php?frameName=trending'></iframe>
<iframe class='plCalendar' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=calendar'></iframe>
<iframe class='' style='width: 220px; height: 250px;' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=adem'></iframe>?
<iframe name='plHomepageContacts' class='plHomepageContacts' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=contactSuggests'></iframe>
<iframe class='plHomepageClubs' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=groupSuggests'></iframe>

[NoSmoking]

que te donne la console concernant le this, correspond t-il à l'IFRAME?

[Kogratte]

Le console.log donne exactement ceci :

Code :

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

1
2
3
4
5
6
7
 
<iframe class='plLoggedIn' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=connectArea'></iframe>
<iframe frameborder='0' scrolling='no' class='plTrendingTopicsWithTitle' src='/ressources/template/getPLFrame.php?frameName=trending'></iframe>
<iframe class='plCalendar' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=calendar'></iframe>
<iframe class='' style='width: 220px; height: 250px;' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=adem'></iframe>?
<iframe name='plHomepageContacts' class='plHomepageContacts' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=contactSuggests'></iframe>
<iframe class='plHomepageClubs' scrolling='no' frameborder='0' src='/ressources/template/getPLFrame.php?frameName=groupSuggests'></iframe>

Ces infos apparaissent bien sur en plusieurs fois, une iframe correspondant à un console.log.