Iframe : rediriger vers le site de l'iframe au clic d'un lien

**Timoune007** · 01/07/2015, 19h34

Bonjour,
J'ai sur mon site, un iframe qui affiche une portion d'un site extérieur (en l'occurrence son menu).
En dessous j'ai le contenu de mon site.
Le problème que je souhaiterai résoudre c'est que lorsqu'on clique sur un lien du menu (donc de l'iframe) on navigue dans l'iframe ensuite. Or je souhaiterai que lorsqu'on clic sur un lien dans l'iframe, la page ciblée est chargée et s'affiche entièrement. Qu'on soit redirigé sur le site du lien ciblée, que ca ne navigue pas dans l'iframe, mais que la page change carrement.

Je ne sais pas si c'est réalisable, enfin je l'espère tout de même, quelque soit le langage à utiliser !
J'espère m'être bien exprimé et que certains pourront m'aider

Merci d'avance !

**www.diazis.com** · 02/07/2015, 08h30

Bonjour,

Comme l'élément iframe n'a pas d'événement click et que pour des raisons de sécurité tu ne peux accéder aux événements de la page de l'iframe, il faut sans doute passer par la perte de focus de la page principale.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <p>Mon site principal</p>
    <iframe id="myIframe" src="http://Mon_site_iframe.com"></iframe>
    <p>Mon site principal</p>
    <script> 
      document.body.focus();
      addEventListener('blur', function() {
        if(document.activeElement === document.getElementById('myIframe')) {
          location.href = "http://Mon_site_iframe.com";
        }
      });
    </script>
  </body>

**Timoune007** · 02/07/2015, 13h52

Merci de votre réponse.

J'ai essayé le code que vous avez fournit et ça ne marche pas...
Voici un exemple que je prend, avec Wikipedia.

Voila le code, avec une partie du site.
Si l'on clique sur le logo de Wikipedia je change de page mais dans mon iframe. Je ne suis pas dirigé sur cette page https://fr.wikipedia.org/wiki/Wikip%...ueil_principal.

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
<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
    </head>

    <body>
	    <iframe id="myIframe" src="https://fr.wikipedia.org/wiki/Site_web" scrolling="no" width="100%" height="525px"></iframe>
	    
	    <script> 
	      document.body.focus();
	      addEventListener('blur', function() {
	        if(document.activeElement == document.getElementById('myIframe')) {
	          location.href = "https://fr.wikipedia.org/wiki/Site_web";
	        }
	      });
	    </script>
  </body>
</html>

Merci d'avance !

**www.diazis.com** · 02/07/2015, 14h47

Il marche sous IE mais effectivement pas sous Firefox.
Voilà un code fonctionnant sous les deux :

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <iframe id="myIframe" src="https://fr.wikipedia.org/wiki/Site_web" scrolling="no" width="100%" height="525px"></iframe>
    <input type="text">
    <script> 
      document.body.focus();
      addEventListener('blur', function() {
        if(document.activeElement == document.getElementById('myIframe') || document.activeElement == document.body) {
          location.href = "https://fr.wikipedia.org/wiki/Site_web"; 
        }  
      });
	    </script>
  </body>
</html>

Cela dit c'est loin d'être parfait :
La perte de focus se produit également si tu cliques sur certain élément en dehors de la page (ex: la barre d'adresse).
Je ne sais pas si ca fonctionne avec d'autre navigateurs.
A toi de voir si en fonction de ce que tu souhaites en faire cela te convient ou pas.

**Timoune007** · 02/07/2015, 15h58

En effet, ça marche pour Firefox maintenant.
Le problème du coup c'est que où que je clique dans l'iframe, même sur aucun élément, ça ouvre la page.
Or, par exemple pour mon menu que je souhaite intégrer, il est déroulant. Pour le dérouler il faut cliquer sur la rubrique, pour pouvoir sélectionner ou je veux aller sur le site.
Problème, si je clique sur la rubrique, ça charge la page avant même que le menu se déroule...

Mais le concept est déjà là

En JS je suis débutant donc je ne saurai pas trouver de solution... En as tu une solution pour améliorer ça ?

Au pire en JS, on ne peut pas dire que tous les liens de l'iframe s'ouvrent dans un nouvel onglet ? Comme ça on pourrait naviguer sur la page et non plus dans l'iframe.
Ça reste une solution (si c'est faisable) si il n'y a en pas d'autres sur la base de ce que tu m'a donné.

Merci d'avance.

**www.diazis.com** · 02/07/2015, 17h51

L'iframe est très contrôlée car potentiel risque de vulnérabilité. Donc on peut pas faire tout ce qu'on veut.
Donc la solution que je propose est bien "loin d'être parfaite".
Pas possible de contrôler de la page principale ce qui se passe dans l'iframe.

Par contre oui on peut ouvrir une nouvelle page ou onglet (choix non selectable par JavaScript mais définie dans le navigateur client).
Tu remplaces :

Code :

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

location.href = "https://fr.wikipedia.org/wiki/Site_web";

par :

Code :

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

window.open("https://fr.wikipedia.org/wiki/Site_web");

**Timoune007** · 08/07/2015, 23h37

Merci de tes réponses.
En fin de compte je n'ai pas opté pour un iframe, tant pis, je me suis débrouillé sans. Ce n'était pas adapté.
Enfin bon, merci quand même d'y avoir réfléchie !

Iframe : rediriger vers le site de l'iframe au clic d'un lien

Conception Web

Discussions similaires

Partager

Partager