Rediriger la fenêtre parent à partir d'une action iframe

312

Quel JavaScript dois-je utiliser pour rediriger une fenêtre parent à partir d'un iframe?

Je veux qu'ils cliquent sur un lien hypertexte qui, en utilisant JavaScript ou toute autre méthode, redirigerait la fenêtre parente vers une nouvelle URL.

javascript iframe dhtml

— Cliquez Upvote
source

5

La fenêtre parente , en elle-même, pourrait également être un IFrame. Étant donné que la réponse acceptée concerne la fenêtre supérieure , je vous suggère de modifier un peu votre question.

— Ron Klein

521

window.top.location.href = "http://www.example.com";

Comme indiqué précédemment, redirigera l'iframe parent.

— MIP
source

Je ne pense pas que la même politique d'origine s'applique ici. Il est logique que vous soyez en mesure de séparer votre site de l'iframe de quelqu'un d'autre.

— Brian McAuliffe,

1

Dans Chrome, @Parris jsfiddle génère cette erreur: tentative de JavaScript non sûre pour lancer la navigation pour le cadre avec l'URL « jsfiddle.net/ppkzS » à partir du cadre avec l'URL « parrisstudios.com/tests/iframe_redirect.html ». Le cadre qui tente de naviguer dans la fenêtre de niveau supérieur est en bac à sable, mais l'indicateur «autoriser la navigation supérieure» n'est pas défini.

— Bjarte Aune Olsen

1

@BjarteAuneOlsen intéressant, pourrait être un changement récent dans le chrome ou le webkit. Cela fonctionnait définitivement auparavant. Cela fait quelques années :). De plus, la réponse indiquait que la même politique d'origine s'appliquait, ce qui rendait la réponse incorrecte auparavant, mais la rend maintenant correcte et mon commentaire faux -_-.

— Parris

4

@BjarteAuneOlsen - Je crois que c'est parce que les Iframe sur jsFiddle sont délibérément sandbox ils ont explicitement refusé certaines fonctions (comme redirection, etc.) - il y a un danger que vous souhaitez utiliser JS pour naviguer loin de JS Fiddle et de perdre votre travail. ..

— Zhaph - Ben Duguid

12

Les erreurs que les gens rencontrent ici sont dues à un nouvel attribut HTML5 pour les iframes appelé, " sandbox" - developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe L' sandboxattribut empêche javascript de prendre certaines actions dans un iframe basé sur une liste blanche donnée d'actions autorisées. La allow-top-navigationpropriété est l'une des actions que vous pouvez activer dans la liste blanche, ce qui permet à ce code de fonctionner. Si l' sandboxattribut est absent, toutes les actions sont autorisées. Si elle est présente et une chaîne vide, toutes les actions sont refusées.

— Marcus Harrison

115

J'ai trouvé que ça <a href="..." target="_top">link</a>marche aussi

— Cliquez Upvote
source

7

Bien que la réponse choisie soit correcte, je pense que c'est une meilleure réponse à l'intention de la question. En outre, cela fonctionnera pour les personnes qui ont désactivé JS.

— Michael - Où est Clay Shirky

Je suis d'accord pour dire que c'est la meilleure solution mais l'OP a spécifiquement demandé le javascript. D'un autre côté, OP a spécifié qu'il devrait être déclenché via une ancre - je ne vois pas de scénario où l'on serait obligé d'utiliser javascript à partir d'une balise d'ancrage pour obtenir le résultat souhaité, la question est donc trompeuse.

— nocarrier

2

Si simple et élégant. Fonctionne comme un charme :)

— Yash

54

window.top.location.href = "http://example.com";

window.top fait référence à l'objet fenêtre de la page en haut de la hiérarchie des cadres.

— Luca Matteis
source

9

La propriété window.top.location.href ne peut pas être mise à jour à partir d'Iframe, elle renvoie l'accès refusé. Il ne peut être exécuté que lorsque vous testez sur localhost

— Muhammad Ummar

4

@Ummar: J'ajouterais que cela fonctionne lorsque le parent et l'iframe ont le même domaine, le même port (mêmes politiques d'origine), il lève une exception d'accès refusé quand ils sont différents, pour éviter les violations de sécurité

— Quan Mai

5

@Ummar qui n'est pas vrai, jsfiddle.net/ppkzS pour preuve. Vous pouvez modifier window.top.location.href. Vous ne pouvez tout simplement pas le lire. Fonctionne en chrome.

— Parris

Great jsfiddle @Parris, ça règle pour moi :)

— Max Williams

2

Je soupçonne que certains des sceptiques ont peut-être essayé quelque chose comme ça dans l'iframe: window.top.location.href = window.top.location.href ;

— mjj1409

15

ou une alternative est la suivante (en utilisant un objet document)

parent.document.location.href = "http://example.com";

— Vrai rouge.
source

5

Cette solution est spécifique à Firefox. Il faut juste utiliser parent.location.href = .... developer.mozilla.org/en/document.location

— kay - SE is evil

15

target="_parent"a très bien fonctionné pour moi. facile et sans tracas!

— rDroid
source

Cela semble très bien fonctionner. Y a-t-il des inconvénients à utiliser cette méthode plutôt que Javascript?

— flyingL123

Pas que je sache de. Partagez si vous découvrez quelque chose.

— rDroid

7

@MIP a raison, mais avec les nouvelles versions de Safari, vous devrez ajouter l'attribut sandbox (HTML5) pour donner un accès de redirection à l'iFrame. Il y a quelques valeurs spécifiques qui peuvent être ajoutées avec un espace entre elles.

Référence (vous devrez faire défiler): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Ex:

<iframe sandbox="allow-top-navigation" src="http://google.com/"></iframe>

— Raymond B
source

Notez que l' sandboxattribut active un ensemble supplémentaire de restrictions pour le contenu dans le <iframe>. La valeur de la sandboxpropriété supprime des restrictions particulières. Attention donc à utiliser cette fonctionnalité. w3schools.com/tags/att_iframe_sandbox.asp

— gitaarik

3

Cela résoudra la misère.

<script>parent.location='http://google.com';</script>

— Ali Haris
source

3

Si vous souhaitez rediriger vers un autre domaine sans que l'utilisateur n'ait rien à faire, vous pouvez utiliser un lien avec la propriété:

target="_parent"

comme indiqué précédemment, puis utilisez:

document.getElementById('link').click();

pour qu'il redirige automatiquement.

Exemple:

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<a id="link" target="_parent" href="outsideDomain.html"></a>

<script type="text/javascript">
    document.getElementById('link').click();
</script>

</body>

</html>

Remarque: La commande javascript click () doit venir après avoir déclaré le lien.

— Tom Burris
source

1

Il est possible de rediriger à partir d'un iframe, mais pas d'obtenir des informations du parent.

— Joris Kok
source

0

Essayez d'utiliser

window.parent.window.location.href = 'http://google.com'

— Chirag Gohel
source

Version simple: parent.window.location = '<URL>';

— shasi kanth du

1

ou encore simplifié:parent.location = 'url'

— grilly

0

window.top.location.href = 'index.html';

Cela redirigera la fenêtre principale vers la page d'index. Merci

— dnts2012
source

Duplicata de cette réponse datant de près de 5 ans plus tôt.

— Michael - Où est Clay Shirky le

-2

Nous devons utiliser window.top.location.href pour rediriger la fenêtre parente d'une action iframe.

URL de démonstration :

— Faizal
source

1

Qui est nous? :) Pourriez-vous écrire les parties essentielles de l'URL dans la réponse s'il vous plaît? Les URL / liens peuvent changer ou être supprimés.

— YesThatIsMyName

-8

Rediriger iframe dans la fenêtre parent par iframe dans le même parent:

window.parent.document.getElementById("content").src = "content.aspx?id=12";

— mohamed moren3
source