Изменить URL родительского окна из iFrame

у меня есть родительский сайт на myurl.com из которого я загружаю iFrame в слой наложения / модального слоя. В iFrame у меня есть разные вкладки с шагами 1-5, содержащими разные элементы формы - другими словами, это своего рода поток проверки. Каждая вкладка находится в div с eg. ИД "вкладке tab1".

Я использую плагин easytabs jQuery (http://os.alfajango.com/easytabs/) который использует изменение хэша jQuery для изменения URL-адреса при нажатии на вкладку, чтобы URL-адрес скажем, например. миурл.com#tab1. Однако это не работает, когда вкладки размещаются внутри iFrame. Это проблема, потому что при нажатии кнопки браузера назад вы оставите весь поток и, возможно, потеряете много введенных данных, что означает baaaaad UX.

Итак, мой вопрос: Есть идеи, как изменить URL-адрес на родительском сайте от действий, которые вы делаете в iFrame?

спасибо заранее!

в основном мой код в Родительском окне "myurl.com" выглядит вот так:

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

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

и вкладки в iframe.html выглядит просто так:

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

4 ответов


попробуй такое

<a href="#" onclick="top.window.location.href='URLGoesHere';">

также подробнее о top на HTML

соответствующим образом загружает содержимое в набор фреймов верхнего уровня (по сути, весь браузер window), независимо от того, сколько вложенных уровней вниз по текущему фрейму местонахождение


один из способов сделать это с помощью window.postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage


Если вы просто хотите сделать это без использования javascript, вы можете дать:

<a href="absolute_target_url" target="_parent"></a>

просто упоминая цель в качестве родителя, она будет работать даже для междоменных iframes.


вы также можете сделать это, если загружаете url-адрес iframe из родительского фрейма.

<a href="#" onclick="window.parent.location='/url';return false;">