解决方案：

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的链接。单击每个视频后，单击浏览器后退按钮将导致之前描述的内容。

View CodePen

Answer 1

解决方案：

使用iframe.contentWindow.location.replace代替更新iframe src属性。

在查看CodePen之后，我想我发现了这个问题。因为Pen是私人的，所以无法测试。

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

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

为此提供了几种解决方案。

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

希望这是你正在寻找的。

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

1 个答案:

解决方案：