11496 sujets

JavaScript, DOM et API Web HTML5

Changement de contenu dans Iframe

Bonjour a tous,

J'ai un petit souci avec Interner explorer 9 , qui refuse de prendre en charge mon petit bout de code.
Le but de ce code est de charger une page en HTML dans l'iframe, et via un menu vertical sur le coté, de sélectionner une ancre dans la page HTML.

Tout fonctionne très bien sur tout les navigateur hormis IE9, et j'ai beau chercher, je ne trouve pas !

<!doctype html>
<html>

<head>

<meta charset="utf-8" />
<link href="images/location.ico" type="image/x-icon" rel="shortcut icon"/>
<link rel="stylesheet" type="text/css" href="CSS/reset.css"/>
<link rel="stylesheet" type="text/css" href="CSS/loisirs.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

</head>

<!--iframe-->
<div class="item-1 content-item" style="display: none">
    <iframe src="list-loisirs.html#velo" name="iframe_a" scrolling="no" height="250" width="280"></iframe>
</div>

<div class="item-2 content-item" style="display: none">
    <iframe src="list-loisirs.html#rando" name="iframe_b" scrolling="no" height="250" width="280"></iframe>
</div>

<div class="item-3 content-item" style="display: none">
    <iframe src="list-loisirs.html#vtt" scrolling="no" height="500" width="280" ></iframe>
</div>
<!--menu-->
<div id="menu">
	<div class="menu"id="menu1" onmouseover="affiche(this)">
	<a href="#">Loisirs en Plein air</a>
		<div class="sousmenu" id="sousmenu1" style="display:none" onmouseout="affiche(this)">
			<ul>
				<li class="change-item" data-item="1"><a href="#">Vélo</a></li>
				<li class="change-item" data-item="2"><a href="#">Randonnées</a></li>
				<li class="change-item" data-item="3"><a href="#">VTT</a></li>
			</ul>
		</div>
	</div>
</div>
<!--appel iframe-->	
<script>
$('.change-item').click(function(){
    var this_item = $(this).attr("data-item");
    $('.content-item').hide();
    $('.item-' + this_item).fadeIn();
});
</script>
<!--menu vertical-->
<script>
function affiche(obj){
	var id = obj.id;
	
	for(var i = 1; i <= 1; i++){
		document.getElementById('sousmenu'+i).style.display = "none";
	}
	
	if(document.getElementById('sous'+id)){
		document.getElementById('sous'+id).style.display = "block";
	}
}
</script>
</body>

</html>


Une piste?

Merci d'avance pour votre aide.
tu utilise "document.getElementById" sur des " class ", passe c'est class en id et ton soucis sera peux être résolu ...
Modifié par tazzkiller (29 Oct 2013 - 23:42)
Bonjour et merci pour votre réponse.

En fait, le script du menu verticale fonctionne sur tout les navigateur (y compris IE9 ), il permet juste l'affichage des sous menus. Je ne pense pas qu'il puisse poser problème...enfin je pense. J'ai quand meme essayer de remplacer les Class en ID, mais cela empêche l'affichage des sous menus.

J'utilise "document.getElementById" pour le menu car il fait référence à l'ID "sousmenu1".

Le problème rencontrer actuellement sous IE9 (et toutes autres versions de IE) est qu'il m’ignore les ancres quand il charge l'Iframe.
En gros il charge la page HTML dans l'Iframe "list-loisirs.html" mais il ne ce cale pas sur #mon_ancre, il affiche la page depuis le début.
Le menu vertical a pour but de sélectionner l'ancre dans la page ( "list-loisirs.html" + "#mon_ancre").

Le $('.window').load( ) ne change rien au problème.

En espérant avoir étais le plus explicite possible et que l'on puisse trouver la solution...Une idées peut être?

Encore merci Tazzkiller.
Modifié par cultroy (07 Nov 2013 - 19:15)
non c'est en local, je peux a la limite préparer un RAR a télécharger.
Je ne sais pas si l'on peut mettre un fichier à télécharger sur le forum.

J'ai créer un sous domaine pour une mise en ligne du fichier, mais il faut du délai avant que cela soit effectif.
Modifié par cultroy (30 Oct 2013 - 14:36)
Bonjour à tous,
J'ai trouvé qu'IE ne remplace pas le display:none de la DIV par l'appel du script.

<div class="item-2 content-item" [b]style="display: none"[/b]>


Le display:none reste prioritaire pour lui Smiley confus

Pratiquement tous les codes en javascript que j'ai pu voir pour remplacer le contenue d'une DIV, se servent d'un display:none, et IE ne le prend pas en charge.

En espérant avoir quelques informations sur le sujet.

Merci
Sujet clos
Aller à