Przekieruj okno nadrzędne z akcji iframe

312

Jakiego kodu JavaScript potrzebuję do przekierowania okna nadrzędnego z ramki iframe?

Chcę, aby kliknęli hiperłącze, które za pomocą JavaScript lub innej metody przekieruje okno nadrzędne do nowego adresu URL.

Kliknij opcję Upvote
źródło
5
Samo okno nadrzędne również może być IFrame. Ponieważ zaakceptowana odpowiedź dotyczy górnego okna, proponuję nieco zmienić swoje pytanie.
Ron Klein,

Odpowiedzi:

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

Jak wspomniano wcześniej, przekieruje nadrzędny element iframe.

MIP
źródło
Nie sądzę, aby obowiązywały tutaj te same zasady dotyczące pochodzenia. To ma sens, że powinieneś być w stanie wyłamać swoją witrynę z iframe innej osoby.
Brian McAuliffe,
1
W Chrome @Parris jsfiddle zgłasza ten błąd: Niebezpieczna próba JavaScript, aby zainicjować nawigację dla ramki o adresie URL „ jsfiddle.net/ppkzS ” z ramki o adresie URL „ parrisstudios.com/tests/iframe_redirect.html ”. Ramka próbująca nawigować w oknie najwyższego poziomu jest w trybie piaskownicy, ale flaga „zezwól na najwyższą nawigację” nie jest ustawiona.
Bjarte Aune Olsen
1
@BjarteAuneOlsen interesujące, może być ostatnia zmiana w chrome lub webkit. Zdecydowanie wcześniej działało. Minęło kilka lat :). Również odpowiedź użyta do stwierdzenia, że ​​zastosowano tę samą zasadę pochodzenia, która poprzednio czyniła odpowiedź niepoprawną, ale teraz czyni ją poprawną, a mój komentarz błędny -_-.
Parris,
4
@BjarteAuneOlsen - Wierzę, że dzieje się tak, ponieważ iframe na JSFiddle są celowo w piaskownicy, więc wyraźnie odmówiły pewnych funkcji (takich jak przekierowanie itp.) - istnieje niebezpieczeństwo, że użyjesz JS do opuszczenia JS Fiddle i stracisz pracę. ..
Zhaph - Ben Duguid
10
Błędy ludzie napotykają oto powodu nowego atrybutu HTML5 iframe nazwie „ sandbox” - developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe że sandboxzapobiega atrybutów obsługa JavaScript podejmowanie pewnych działań w ramach iframe oparte na danej białej liście dozwolonych działań. allow-top-navigationNieruchomość jest jednym z działań, jakie można włączyć w białej listy, co pozwala ten kod do pracy. Jeśli sandboxatrybut jest abscent, wszystkie akcje są dozwolone. Jeśli jest obecny i pusty ciąg znaków, wszystkie działania są odrzucane.
Marcus Harrison
115

Odkryłem, że to <a href="..." target="_top">link</a>też działa

Kliknij opcję Upvote
źródło
7
Chociaż wybrana odpowiedź jest poprawna, myślę, że jest to lepsza odpowiedź na cel pytania. Będzie również działał dla osób, które mają JS wyłączone.
Michael - Where's Clay Shirky
Zgadzam się, że to najlepsze rozwiązanie, ale OP specjalnie poprosił o javascript. Z drugiej strony OP określił, że powinien być uruchamiany za pomocą kotwicy - nie widzę scenariusza, w którym ktoś byłby zmuszony użyć javascript z tagu kotwicy w celu osiągnięcia pożądanego rezultatu, dlatego pytanie jest mylące.
nocarrier
2
Tak prosty i elegancki. Działa jak urok :)
Yash
54
window.top.location.href = "http://example.com";

window.top odnosi się do obiektu okna strony u góry hierarchii ramek.

Luca Matteis
źródło
9
window.top.location.href nie można zaktualizować z iframe, powoduje to odmowę wykonania odmowy dostępu. Można go wykonać tylko podczas testowania na lokalnym hoście
Muhammad Ummar
4
@Ummar: Dodałbym, że to działa, gdy rodzic nadrzędny elementu iframe ma tę samą domenę, ten sam port (te same zasady pochodzenia), rzuca wyjątek odmowy dostępu, gdy są one różne, aby zapobiec naruszeniom bezpieczeństwa
Quan Mai
5
@Ummar to nieprawda, jsfiddle.net/ppkzS jako dowód. Możesz zmienić window.top.location.href. Po prostu nie możesz tego przeczytać. Działa w chromie.
Parris,
Świetna jsfiddle @Parris, która mnie załatwia :)
Max Williams,
2
Podejrzewam, że niektórzy wątpiący próbowali czegoś takiego w ramce iframe: window.top.location.href = window.top.location.href ;
mjj1409
15

lub alternatywą jest następująca (przy użyciu obiektu dokumentu)

parent.document.location.href = "http://example.com";
Real Red.
źródło
5
To rozwiązanie jest specyficzne dla Firefoksa. Należy po prostu użyć parent.location.href = .... developer.mozilla.org/en/document.location
kay - SE is evil
15

target="_parent"działało świetnie dla mnie. łatwe i bezproblemowe!

rDroid
źródło
Te wydają się działać świetnie. Czy są jakieś wady korzystania z tej metody zamiast Javascript?
flyingL123 17.09.15
nie żebym o tym wiedział. Udostępnij, jeśli coś znajdziesz.
rDroid
7

@MIP ma rację, ale w nowszych wersjach Safari musisz dodać atrybut piaskownicy (HTML5), aby umożliwić przekierowanie do iFrame. Istnieje kilka konkretnych wartości, które można dodać ze spacją między nimi.

Odniesienie (musisz przewinąć): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Dawny:

<iframe sandbox="allow-top-navigation" src="http://google.com/"></iframe>
Raymond B.
źródło
Pamiętaj, że ten sandboxatrybut włącza dodatkowy zestaw ograniczeń dla zawartości w <iframe>. Wartość sandboxwłaściwości usuwa określone ograniczenia. Uważaj więc, korzystając z tej funkcji. w3schools.com/tags/att_iframe_sandbox.asp
gitaarik
3

To rozwiąże nieszczęście.

<script>parent.location='http://google.com';</script>
Ali Haris
źródło
3

Jeśli chcesz przekierować do innej domeny bez konieczności robienia czegokolwiek, możesz użyć linku z tą właściwością:

target="_parent"

jak powiedziano wcześniej, a następnie użyj:

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

aby automatycznie przekierowywał.

Przykład:

<!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>

Uwaga: Polecenie click javascript musi pojawić się po zadeklarowaniu łącza.

Tom Burris
źródło
1

Możliwe jest przekierowanie z ramki iframe, ale nie w celu uzyskania informacji od rodzica.

Joris Kok
źródło
0

Spróbuj użyć

window.parent.window.location.href = 'http://google.com'
Chirag Gohel
źródło
Wersja prosta: parent.window.location = '<URL>';
shasi kanth
1
lub jeszcze bardziej uproszczone:parent.location = 'url'
grilly
0
window.top.location.href = 'index.html';

Spowoduje to przekierowanie głównego okna do strony indeksu. Dzięki

dnts2012
źródło
Duplikat tej odpowiedzi z prawie 5 lat wcześniej.
Michael - Where's Clay Shirky
-2

Musimy użyć window.top.location.href, aby przekierować okno nadrzędne z akcji iframe.

URL wersji demo :

Faizal
źródło
1
Kim jesteśmy? :) Czy możesz napisać niezbędne części z adresu URL w odpowiedzi, proszę? Adresy URL / linki mogą ulec zmianie lub zostać usunięte.
YesThatIsMyName
-8

Przekieruj iframe w oknie nadrzędnym przez iframe w tym samym rodzicu:

window.parent.document.getElementById("content").src = "content.aspx?id=12";
mohamed moren3
źródło