Discussion :

[zeb_panam]

Bonsoir,

Je suis en train de faire un navigateur perso pour donner accès à des clients/collaborateurs/recruteurs aux projets que j'ai développé. Mais j'ai un petit souci avec IE (7, et 8).
J'ai une gestion d'onglets, et je peux charger mes projets dans des iframes. Lorsque l'iframe est chargée, je récupère le titre de l'iframe, et je remplace le texte de l'onglet actif par ce dernier.

En gros, ça marche comme ça :

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
20
21
22
23
24
25
26
function load_projet(projet){
 //
 // On remplace l'iframe active par une nouvelle avec la source correspondante
 //
 source="<iframe width='100%' height='100%' id='f_"+f_active+"' name='f_"+f_active+"' frameborder='0' src='projets/"+projet+"'></iframe>";
 $("iframe#f_"+f_active).replaceWith(source);
 //
 // On teste l'objet iframe pour voir si on est face à IE ou un autre navigateur
 //
 var iframe_en_cours = $($.browser.msie ? frames['f_'+f_active] : "#f_"+f_active);
 iframe_en_cours.load( function() {
	 var w = this.contentWindow;
	 if(!w){
		 w = iframe_en_cours[0];// IE
	 }
	 //
	 // On récupère le titre de l'iframe via l'objet w
	 //
	 titre_frame=w.document.title;
	 //
	 // On insère ce titre dans l'onglet
	 //
	 source="<a href='#'><span class='titre'>"+titre_frame+"</span></a><a href='#'><span class='close'>Fermer cet onglet</span></a>";		
	 $("#"+f_active).html(source);
 });
}

Donc c'est formidable, ça marche avec FF3+, Opera, Safari, Chrome sur Mac ou PC. Mais pour IE, ça marche quedale... Ça ne marche tellement pas, qu'aucune action incluse dans le load() ne se lance sous IE. J'ai testé avec un simple alert() et rien, nada...

Ah, et pour préciser d'où vient cette histoire de load() (d'ailleurs j'ai du mal à comprendre comment marche ce détournement de la fonction load()... vu qu'il n'y pas d'appel d'url comme à l'accoutumé), j'ai trouvé ça ici. D'ailleurs, sur cet exemple, ils indiquent l'obligation d'inclure jQuery dans l'iframe ciblée... Sauf qu'avec ou sans, ça ne marche toujours pas sous IE (et sans ça marche quand même sur les autres navigateurs).


Et enfin, vous pouvez voir une demo là :

Merci d'avance

PS : j'ai testé avec le plugin frameready, mais sans succès.
PS 2 : j'ai un autre souci, mais je ne pense pas qu'il y ait possibilité de le régler (car c'est un bug déclaré de FF). Sous Firefox, si je charge un contenu en flash, que je passe à un autre onglet et que je reviens sur l'onglet qui affiche le contenu en flash, le flash se recharge... Apparemment dès que du flash sort du viewport, puis qu'il re-rentre dedans ben ça le recharge. Le problème n'apparait qu'avec FF.

[zeb_panam]

[EDIT] Finalement document.readyState ne fonctionne que sur IE, mais ça m'aide quand même


Merci à Laurent, car sa réponse sur ce post m'a permis de régler ce problème
Désormais j'utilise la propriété document.readyState (que je ne connaissais pas) pour déterminer lorsque ma frame est chargée. De là j'accède facilement à ce que je souhaite.


Et donc maintenant ça ressemble à ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function testLoaded(){
	if (window.frames["f_"+f_active].document.readyState=="complete") {
		window.clearInterval(t);
		titre_frame=window.frames["f_"+f_active].document.title;
		source="<a href='#'><span class='titre'>"+titre_frame+"</span></a><a href='#'><span class='close'>Fermer cet onglet</span></a>";
		$("#"+f_active).html(source);
	}
}
function load_projet(projet){
	source="<iframe width='100%' height='100%' id='f_"+f_active+"' name='f_"+f_active+"' frameborder='0' src='projets/"+projet+"'></iframe>";
	$("iframe#f_"+f_active).replaceWith(source);
	t = window.setInterval(function(){testLoaded();},100);
}

[zeb_panam]

Enfin, mon problème est résolu !

Donc voici mon script final :
À noter la fonction jQuery.support super utile pour déterminer si on est face à IE ou un autre navigateur. Là je teste la propriété opacity, mais j'aurais pu tester autre chose (voir ici pour plus d'infos).

Code js :

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
 
function testLoaded(){
	if (window.frames["f_"+f_active].document.readyState=="complete") {
		window.clearInterval(t);
		titre_frame=window.frames["f_"+f_active].document.title;
		source="<a href='#'><span class='titre'>"+titre_frame+"</span></a><a href='#'><span class='close'>Fermer cet onglet</span></a>";
		$("#"+f_active).html(source);
	}
}
function load_projet(projet){
	source="<iframe width='100%' height='100%' id='f_"+f_active+"' name='f_"+f_active+"' frameborder='0' src='projets/"+projet+"'></iframe>";
	$("iframe#f_"+f_active).replaceWith(source);
	if(jQuery.support.opacity){
		// Pas IE
		$("#f_"+f_active).load( function() {
			var w = this.contentWindow;
			titre_frame=w.document.title;
			source="<a href='#'><span class='titre'>"+titre_frame+"</span></a><a href='#'><span class='close'>Fermer cet onglet</span></a>";
			$("#"+f_active).html(source);
		});
	}else{
		// IE
		t = window.setInterval(function(){testLoaded();},100);
	}
}

PS : j'ai toujours mon problème de reload de flash, si quelqu'un a une idée