2013-05-15 1 views
4

У меня есть страница, содержащая iframe. IFrame может принимать пользовательский ввод (посредством нажатия кнопки или выбора меню) и соответственно отображать контент. Что мне нужно, когда пользователь манипулирует iframe, браузер нажимает каждый набор параметров iframe на историю; и когда пользователь нажимает кнопку «Назад», iframe перезагружает свой контент, используя сохраненные параметры из предыдущей записи истории. У меня есть часть кода, выполняющая перезагрузку, как показано ниже.Два щелчка на задней кнопке необходимы для запуска события popstate/statechange

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

Говорит, что у меня есть состояние- , 3, 2 в истории, и теперь я в состоянии 5

  1. первый щелчок восстановить состояние 4 («---- состояние изменилось ----» ведение журнала печатается сообщение
  2. во второй click reloads iframe с содержимым по умолчанию. «---- state changed ----» не печатается, код перезагрузки не вызывается.
  3. третий клик восстановить состояние 3
  4. четвертый щелчок, как 2 клика
  5. 5-й нажмите восстановить состояние 2

Таким образом, после каждого клика, успешно восстановить состояние, требуется два клика чтобы инициировать событие popstate (я также попытался изменить состояние с таким же результатом) и восстановить другое предыдущее состояние.

Кто-нибудь знает, что здесь происходит? Заранее спасибо.

History.Adapter.bind(window, "popstate", 
    function (event) { 
     console.log("----state changed------", History.getState()); 
     console.log("----state data------",History.getState().data.state); 

      //code to do reload an iframe to its proper state 

    }); 

ответ

4

Так что я наткнулся на эту же проблему. Ситуация, с которой мы столкнулись, заключалась в использовании history.pushState() для обновления URL-адреса, а затем изменения атрибута src . Изменив src , мы неявно сообщим браузеру добавить в свою историю, что iframe изменился. Таким образом, ...

  1. Когда мы оттеснены в первый раз, window.history «s popstate это срабатывает на » атрибут Src s и вернулся обратно в предыдущее состояние.
  2. Нажатие во второй раз запускает popstate событие для государства вы изначально натягивается на стек

Наше решение участвовать, когда мы решили обновить URL и нажать состояние в стек, когда мы хотели обновить , мы использовали JQuery для замены списка так ...

$("#iFrameID").replaceWith(('<iframe id="iFrameID" src="' + location + '"></iframe>' 

делая это, мы удалили побочный эффект истории браузера пачкаться с нашим обновлением до тега.

+1

Это не сработает, если вы хотите делать более сложные вещи с помощью 'iframe', например POST. Я имею в виду, что это возможно, но для выполнения POST через Ajax требуется очень полный скрипт (для обработки всех случаев краев). В этот момент вам больше не нужно устанавливать URL-адрес iframe, а просто обновлять его содержимое, после чего это простое решение, к сожалению, стало спорным. :/Я все еще ищу более простой способ справиться с этим ... – Domi

0

У меня была такая же проблема. Вместо того, чтобы перемещать пользователя на предыдущую страницу на веб-сайте, кнопка назад переместила пользователя на предыдущую страницу внутри iframe.Этот код поможет вам решить вашу проблему:

iframe.contentWindow.location.replace(href) 
Смежные вопросы