javascript - 如何防止浏览器使用 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 的链接。单击每个视频后，单击浏览器后退按钮应该会出现前面描述的结果。

View CodePen

Answer 1

解决方案:

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

---

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

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

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

对此有几个解决方案。

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

希望这就是您要找的。