javascript - 历史 API pushState() 创建两个条目

Question

如标题所述，当我使用 pushState() 更改历史记录时，它出于某种原因将我的条目添加到堆栈中两次，即使它只被单击了一次。因此，当我尝试使用后退按钮向后遍历时，每隔一次按下按钮我只会得到一个 popstate。当我将状态记录到控制台时，每当我收到“弹出”消息时，它都会显示“空”。

历史是这样的:

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&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;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。

Answer 1

更改 iframe 的 src 会添加两个 pushState。诀窍/黑客/解决方法是删除当前的 iframe，构建一个新的 iframe 片段并将其插入。然后，调用您的 pushState。

来源: Updating an iframe, history and URL. Then making it work with back button