1
正如標題所述，當我使用pushState（）更改歷史記錄時，由於某種原因，它將我的條目添加到堆棧兩次，即使它只被單擊一次。因此，當我嘗試用後退按鈕回溯時，我只會在按下按鈕時彈出一個按鈕。當我將狀態記錄到控制檯時，任何時候我都會看到「空白」。歷史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");
}
編輯：我使用replaceState（也試過）代替pushState的（）。這種解決了雙重輸入問題，但使用後退按鈕不會使用此方法更改瀏覽器中的狀態。這已經在Chrome，Safari和FF上進行了測試。奇怪的是，如果我完全註釋掉pushState（）語句，然後單擊後退按鈕，iframe將重新加載到上一個視頻，但其他內容都不會改變。
3（編輯）：因此，這裏是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將重新加載到以前的視頻並且沒有popstate。點擊第二次'返回'，我得到所有屬性的popstate。
你有嘗試過使用'e.preventDefault（）''..回FALSE'也接近同樣的事情，但值得一問 – charlietfl
是。這是我做的第一件事，然後改爲'return false' – Spartacus
你的代碼似乎適用於我。你可以在'window.history.pushState'下放一個'debugger'或'console.log'來確認每次點擊只需要調用一次。如果可能的話，你可以將大部分代碼與HTML一起發佈嗎？ –