5546 sujets

Sémantique web et HTML

Mettre un menu fixe et un iframe interchangeable

bonjour. j'ai besoin de votre aide, je voudrais faire un site où il y aurai un menu sur le coté gauche dans lequel on pourrai sélectionner des liens (d'autre page que j'aurai créée) qui s'afficherai à droite de la page sans qu'elle se rafraichisse ou qu'elle change, de plus je voudrais que le menu reste fixe mais que la page affiché puisse être scrollé. il me semble que la balise iframe pourrai etre la solution mais je vois pas comment l'utiliser pour qu'elle puisse changer en fonction du lien cliqué.

je sais pas si c'est très clair mais je voudrais faire comme sur le site https://www.q-dance.com

merci d'avance
Modérateur
Bonjour,
On peut utiliser javascript pour changer le contenu d'une iframe suite à un clic sur quelque chose. Par exemple (je préfère utiliser des boutons au lieu de liens, mais ça pourrait marcher avec des liens sauf qu'il faut alors rajouter un peu de code pour que le lien ne se comporte pas comme un lien, mais comme un bouton) :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
nav, main  {
	display: inline-block;
	vertical-align:top;
}
nav button {
	display: block;
}
</style>
<script>
function changeMonIframe(a)
{
	document.getElementById("monIframe").src=a+".html";
}
</script>
</head>
<body>
<nav>
	<button onclick="changeMonIframe('monIframe1');">Iframe1</button>
	<button onclick="changeMonIframe('monIframe2');">Iframe2</button>
</nav>
<main>
	<iframe id="monIframe" src="monIframe1.html"></iframe>
</main>
</body>
</html>


Amicalement,
Modifié par parsimonhi (28 Jan 2019 - 10:43)
Modérateur
Bonjour,

Ceci étant, le site que tu montres en exemple ne me semble pas utiliser ce genre de technique.

Si j'étais à ta place, je rechargerais la totalité de la page à chaque fois.

Amicalement,
Modifié par parsimonhi (28 Jan 2019 - 10:49)
j'ai testé ce que tu m'a envoyé et ca fonctionne super bien je te remercie, mais maintenant un autre problème se pose car je ne peux pas lire les liens contenus dans une page afficher dans l'iframe.
Modérateur
Bonjour,

Exemple de code qui marche pas (sinon, impossible de dire ce qui ne va pas) ?

Amicalement,
Une iframe est une ouverture d'un site dans une "boite"... voyons le comme cela.

Donc une fois que l'iframe est chargé (.load() en jquery) tu peux récupérer le content() et faire ta requête dessus.

Ex : 
 $('#test').on('load', function() { // mon iframe est loadé
        var value = $(this).contents().find("#div a").prop('href'); // je récupe les liens. etc..
    });
Sujet clos
Aller à