代码之家 › 专栏 › 技术社区 › DXC Chris Dolphin

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

pushstate browser-history back-button jquery javascript

DXC Chris Dolphin · 技术社区 · 7 年前

以下是我的情况:

提前谢谢你。

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

这里有一个指向模拟同一问题的代码笔的链接。单击每个视频后,单击浏览器上的后退按钮应该会得到前面描述的结果。

View CodePen

1 回复 | 直到 7 年前

DXC Chris Dolphin 7 年前

解决方案:

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

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

我的第一个想法是尝试 pushState and replaceState 强制历史保持不变,每次点击 .pv_thumb . 这可能有效,但老实说,真正的问题是历史状态根本没有改变。

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

有几个解决方案。

从每个锚点标记中删除href。显然,您需要该字符串来获取youtube视频id,因此请将该字符串存储在其他位置。如果可以,请将其保存在JS中的某个位置,并使用锚点的索引为右手拇指获取正确的视频url。如果不能使用JS,请使用 data- 属性并以这种方式从元素中获取url字符串。就像你现在和 href cursor:pointer
如果你想保留 href :在您的 .pv_拇指 preventDefault 这将阻止浏览器尝试更改URL。看看你的代码,它只是 e.preventDefault() ,就在处理程序的顶部。