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

Question

这是我的情况：

我构建了一个效果很好的视频灯箱，但是，如果用户要单击多个视频，然后单击他们的浏览器后退按钮，他们将无法通过所有已存储的页面状态更改单击返回。这特别烦人，因为视频又开始播放，但实际上并不可见。我一直在四处寻找，但没有找到一个直接的解决方案来解决这个问题。非常感谢任何帮助。 提前谢谢你。

$(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":''});
        }
    });
});

这是模拟相同问题的 CodePen 的 link。单击每个视频后，单击浏览器后退按钮应该会出现前面描述的结果。

View CodePen

Answer 1

解决方案：

使用 iframe.contentWindow.location.replace 而不是更新 iframe src 属性。

在查看了您的 CodePen 之后，我想我找到了问题所在。无法测试，因为 Pen 是私有的。

我的第一个想法是尝试搞乱 pushState and replaceState 以强制历史记录在每次单击 .pv_thumb 时保持不变。这可能行得通，但老实说，真正的问题是历史状态完全改变了。

这让我意识到每个缩略图周围的所有锚标记上都有 href。这应该是问题的原因。每次点击这些链接都会使浏览器想要将 urls 更改为 https://youtu.be/ url 锚点链接到。

几个解决方案。

从每个锚标记中删除 href。显然您需要该字符串来获取 youtube 视频 ID，因此将该字符串存储在别处。如果可以的话，将其保存在 JS 中的某个位置，并使用锚点的索引为右手拇指获取正确的视频 url。如果您不能使用 JS，请使用 data- 属性并以这种方式从元素中获取 url 字符串。就像您现在使用 href 所做的一样。（请记住，删除 href 会阻止光标像您对链接所期望的那样更改为指针。您可以只使用 CSS 中的 cursor:pointer 来解决此问题）。
如果您想保留 href：在您的 .pv_thumb 单击处理程序中使用 preventDefault 事件，这应该会阻止浏览器尝试更改 url秒。查看您的代码，它只是 e.preventDefault()，就在该处理程序的顶部。

希望这就是您要找的。

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

How do I prevent a browser from storing page state changes using javascript?

javascript

jquery

back-button

browser-history

pushstate

解决方案：