Ändern Sie das übergeordnete Fenster die URL aus iFrame

Bin ich mit einer übergeordneten Website an myurl.com von denen lade ich ein iFrame in eine overlay/modal-layer. Im iFrame habe ich verschiedene tabs mit den Schritten 1-5 mit verschiedenen Formular-Elementen - in anderen Worten, es ist eine Art von Kasse fließen. Jeder Registerkarte befindet sich innerhalb eines div mit zB. die id "tab1".

Ich die easytabs jQuery-plugin (http://os.alfajango.com/easytabs/) nutzt die jQuery hash ändern, um zu ändern Sie die URL, wenn Sie auf eine Registerkarte, so dass die URL sagen würde, zB. myurl.com#tab1. Dies jedoch funktioniert nicht, wenn die tabs platziert sind innerhalb des iFrame. Dies ist ein problem, weil, wenn Sie auf die Browser-Schaltfläche zurück verlassen Sie den gesamten Warenfluss und möglicherweise verlieren eine Menge der eingegebenen Daten, was bedeutet, dass baaaaad UX.

So, meine Frage ist: Irgendwelche Ideen, wie die änderung der URL auf der übergeordneten Website von Aktionen, die Sie in den iFrame?

Vielen Dank im Voraus!

Im Grunde ist mein code in das parent-Fenster "myurl.com" sieht so aus:

<div class="main-content">
    <!-- Content goes here -->
</div>

<div class="overlay">
    <iframe id="iframe" src="iframe.html"></iframe>
</div>

Und die Registerkarten in der iframe.html sieht einfach wie diese:

<div id="tabs-container">
    <ul>
        <li><a href="#tab1">Go to tab1</a></li>
        <li><a href="#tab2">Go to tab2</a></li>
    </ul>
    <div id="tab1">
        <!-- Content for Tab 1 goes here -->
    </div>

    <div id="tab2">
        <!-- Content for Tab 2 goes here -->
    </div>
</div>

InformationsquelleAutor McAsh | 2014-05-01

17

Versuchen, diese
```
<a href="#" onclick="top.window.location.href='URLGoesHere';">
```
Lesen Sie auch mehr über top im HTML

_top
lädt Inhalte in die top-level-frameset (in der Tat, der ganze browser
Fenster), egal, wie viele verschachtelte Ebenen nach unten das aktuelle Bild ist
befindet sich
- Wenn ich über meine URL sieht wie folgt aus: myurl.com/iframe.html#tab1 - wird die Seite aktualisiert und ich sehe nur die iframe.html Inhalte und nicht die übergeordnete Website. Sollte die Seite nicht aktualisieren - es sollte nur hinzufügen, die ID des tab zu den übergeordneten URL so sollte es Aussehen diese myurl.com#tab1
- Dies funktioniert auf der übergeordneten Standort -, aber nicht auf das iframe. ` $('#tab1').klicken Sie(function(e) { window.Lage.hash = $(this).attr('id')); e.preventDefault(); }); `
- Genial.........
- Sie markiert diese als die akzeptierte Antwort, aber deine Kommentare deuten darauf hin, niemand konnte sagen, wie es zu ändern übergeordneten URL ohne erfrischende -- hast du eine Antwort? Vielleicht bin ich Irre. Dank
InformationsquelleAutor Mayank Pathak
2

Einen Weg, es zu tun ist mit window.postMessage:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

InformationsquelleAutor Daniel Bang
2

Wenn Sie wollen einfach nur, um es zu tun, ohne Verwendung von javascript, die Sie geben konnte:
```
<a href="absolute_target_url" target="_parent"></a>
```
Nur durch die Erwähnung der Ziel-als Elternteil, es wird funktionieren, auch für cross-domain-iframe.

InformationsquelleAutor iniravpatel
0

Können Sie auch dies tun, wenn Sie sind das laden des iframe-url, von der übergeordneten frame.
```
<a href="#" onclick="window.parent.location='/url';return false;">
```
- Dies nicht den trick tun, entweder. Ich am Ende mit der gleichen URL, wie bei der oben genannten suggestion und die Seite aktualisiert. Es sollte nur hinzufügen, die tab-ID am Ende der Eltern-URL.
- Ich Frage mich, ob es überhaupt möglich ist?
InformationsquelleAutor Control Freak

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.