如何防止浏览器使用javascript存储页面状态更改？

以下是我的情况：

我构建了一个视频灯箱，效果非常好，但是，如果用户单击多个视频，然后单击浏览器上的后退按钮，他们将被卡在所有存储的页面状态更改中单击后退。这尤其令人恼火，因为视频开始重新播放，但实际上却看不见。我一直在四处寻找，没有找到一个简单的解决办法。非常感谢您的帮助。先谢谢你

这里有一个指向模拟相同问题的代码笔的链接。单击每个视频后，单击浏览器的“后退”按钮将生成前面描述的内容

解决方案： 使用

iframe.contentWindow.location.replace

而不是更新iframe src属性。

---

在查看了你的密码笔后，我想我找到了问题所在。无法测试，因为笔是私人的

我的第一个想法是尝试搞乱，强迫历史保持不变，每次点击

.pv\u thumb

。这可能有效，但老实说，真正的问题是历史状态根本不会改变

这让我意识到在每个缩略图周围的所有锚定标记上都有

href

s。这应该是问题的原因。每次点击这些链接都会使浏览器想要更改

https://youtu.be/

锚链接到的url

有几个解决方案

• 从每个锚定标记中删除href。显然，您需要该字符串来获取youtube视频id，所以请将该字符串存储在其他位置。如果可以的话，将其保存在JS中的某个地方，并使用锚的索引为右拇指获取正确的视频url。如果不能使用JS，请使用

  data-

  属性，并以这种方式从元素中删除url字符串。就像您现在使用

  href

  所做的一样。（请记住，删除href将防止光标更改为链接中预期的指针。您可以在CSS中使用

  cursor:pointer

  来解决此问题）
• 如果您想保留

  href

  ：在您的

  .pv_拇指中

  单击事件处理程序使用

  预防默认值

  ，这将阻止浏览器尝试更改URL。查看您的代码，它应该是

  e.preventDefault（）

  ，位于该处理程序的顶部

---

希望这就是您所寻找的。

对于CodePen或JSFIDLE等外部代码链接，建议在问题中也包含您的代码，以防链接中断。@freginold更正。感谢您的回复。我尝试了删除href和使用数据和防止默认设置。不幸的是，两者都没有阻止浏览器存储状态更改。在视频关闭之前，浏览器似乎不会存储更改，所以这可能说明了什么？你能用你提到的更改更新画笔吗。想知道是什么导致了历史的改变。也许Youtube

iframe

应用了这些更改后有些奇怪。好吧，我想我找到了答案。肯定是

iframe

。使用

iframe.contentWindow.location.replace来设置url，而不是更改
src
。发现，但如前所述，它可能不起作用。您还可以尝试在iframe加载后备份iframe的历史记录，如使用
iframe.contentWindow.location.replace
worked！非常感谢。
$(document).ready(function() {
    $(".pv_thumb").click(function(e) {
        var filePath = $(this).attr("href");
        var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        var match = filePath.match(regExp);
        if (match && match[2].length == 11) {
            $(".pv_contain").addClass("pv_active");
            $("#pv_iframe").attr({
                "src":'https://www.youtube-nocookie.com/embed/' + match[2] + '?autoplay=1&rel=0&showinfo=0'
            });
        } else {
            //error
            alert("error");
        }

        return false;
    });
});

$(document).ready(function(){
    $(".pv_close_btn").click(function() {
        $(".pv_contain").removeClass("pv_active");
        $("#pv_iframe").attr({"src":''});
    });

    $(".pv_contain").click(function() {
        $(".pv_contain").removeClass("pv_active");
        $("#pv_iframe").attr({"src":''});
    });

    $(document).on('keyup',function(evt) {
        if (evt.keyCode == 27) {
            $(".pv_active").removeClass("pv_active");
            $("#pv_iframe").attr({"src":''});
        }
    });
});