Как указано в заголовке, когда я использую pushState() для изменения истории, она по какой-то причине добавляет мою запись в стек дважды, хотя ее только один раз щелкнул. Поэтому, когда я пытаюсь вернуться назад с помощью кнопки «назад», я получаю только всплывающее сообщение при каждом нажатии кнопки. И когда я регистрирую состояние в консоли, каждый раз, когда я получаю «поп», он показывает «null».История API pushState(), создающая две записи
Это то, что история выглядит следующим образом:
http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/8/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/3/ http://example.com/foo/bar/question/27/ http://example.com/foo/bar/question/27/
То, что я пытаюсь сделать, это заново загрузить IFRAME (и изменить текст h1) на ссылку мыши без перезагрузки всей страницы , но все же есть история, которая проходит и закладывается в закладки (это слово?) ... Похоже, это должно быть просто, и я прошел примеры из MDN и других учебных пособий безрезультатно.
Мой код ниже. Я уверен, что я делаю что-то совершенно неправильное, но любая помощь/понимание будут оценены очень высоко!
$(".vidlinks a").on('click', function(e) {
var frsrc = 'https://player.vimeo.com'+$(this).attr('data-iframe')+'?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&autoplay=1',
targetUrl = $(this).attr('href'),
pgtitle = $(this).attr('title'),
obj = {url:targetUrl,ttl:pgtitle};
$("iframe").attr('src', frsrc);
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(pgtitle);
});
$(".vidtitle h1").fadeIn("fast");
window.history.pushState(obj, document.title, targetUrl);
return false;
});
window.onpopstate = function(e) {
$(".vidtitle h1").fadeOut("fast", function() {
$(this).text(e.state.ttl);
});
$(".vidtitle h1").fadeIn("fast");
}
EDIT: Я также попытался с помощью replaceState() вместо PushState(). Этот вид исправления проблемы с двойной записью, но с помощью кнопки «Назад» не изменяет состояние в браузере с помощью этого метода. Это было проверено на Chrome, Safari и FF.
EDIT EDIT: Как ни странно, если я полностью закомментирую инструкцию pushState() и нажмите кнопку «Назад», iframe перезагрузится в предыдущее видео, но ничего не изменится.
3 (EDIT): Так вот код IFrame ...
<iframe src="https://player.vimeo.com/video/VIDEOID?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0&autoplay=1" width="1920" height="1080" frameborder="0" title="THETITLE" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
VIDEOID и THETITLE это просто строки первоначально переданных из PHP.
На этот раз я запустил console.log, и вот что он делает. Я нажимаю ссылку (один раз), которая передает новый iframe src в iframe, но это создает две записи истории. При первом нажатии кнопки «Назад» iframe перезагружается в предыдущее видео и не имеет всплывающих окон. При повторном нажатии «назад» я получаю всплывающее меню со всеми свойствами.
вы пробовали его с помощью 'e.preventDefault()' '.. возвращение false' делает близко к той же вещи, но стоит спросить – charlietfl
Да. Это было первое, что я сделал, а затем изменил на 'return false' – Spartacus
Ваш код, похоже, работает на меня. Можете ли вы поставить 'debugger' или' console.log' под 'window.history.pushState', чтобы подтвердить, что push вызывается только один раз за клик. Если возможно, можете ли вы разместить большую часть кода вместе с HTML. –