javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮-6ren

javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮

转载作者：行者123 更新时间：2023-11-29 16:30:50

26

4

更新:- 正如 Akansh Gulati 在他的回答中指出的那样，如果用户在单击后退按钮之前与页面有任何交互，这将按预期工作，如果用户不这样做与页面进行任何交互并按下后退按钮，然后历史记录中的任何条目(通过哈希更改或通过 history.push/replace )将被忽略，这是 Google Chrome update will stop websites hijacking your browser back button 的一部分

这是有效且合乎逻辑的答案，所以我接受他的答案

我试图在页面加载后显示一个成功的弹出窗口，如果用户按下 android 后退按钮(在这种情况下相当于浏览器后退按钮)我只想关闭弹出窗口(不想重定向回付款页)

当弹出窗口打开时，我在 url 中添加哈希，但是当用户按下后退按钮时，chrome 忽略哈希并重定向回上一页，而不是仅仅删除哈希(在 Firefox 中工作正常)

~~我有一个工作示例 here~~ 使用以下 HTML 代码重现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body onload="test()">
    <button type="button" onclick="window.history.back();">Back</button>
  </body>
  <script type="text/javascript">
    function writeLength() {
      document.body.appendChild(document.createTextNode(window.history.length));
    }

    function test() {
      window.location.hash = 'a';
      setTimeout(function() {
        writeLength();
        window.location.hash = 'b';
        setTimeout(function() {
          writeLength();
          window.location.hash = 'c';
          setTimeout(function() {
            writeLength();
          }, 1500);
        }, 1500);
      }, 1500);
    }
  </script>
</html>

a) 在 chrome 中打开这个页面

b) 等到 hash 变成 '#c'

c) 然后按浏览器后退按钮

预期的行为是它应该将散列更改回“#b”，然后再更改回“#a”但它忽略所有哈希更改并重定向回新标签页

这是 code

      window.location.hash = 'a';
      setTimeout(function() {
        writeLength();
        window.location.hash = 'b';
        setTimeout(function() {
          writeLength();
          window.location.hash = 'c';
          setTimeout(function() {
            writeLength();
          }, 1500);
        }, 1500);
      }, 1500);

我怎样才能模拟正确的行为(如果有的话)？

我在 Mac 上使用 chrome 版本 77.0.3865.90(官方构建)(64 位)

这是行为的 GIF 图片

最佳答案

在此浏览器中，您需要通过 History API 在历史记录中明确设置至少一种状态。 (虽然不知道为什么)。

_{即使在此 iframe 中，该示例也应该有效。}

history.replaceState( {}, '' );

window.location.hash = 'a';
setTimeout(function() {
  console.log( location.hash );
  window.location.hash = 'b';
  setTimeout(function() {
    console.log( location.hash );
    window.location.hash = 'c';
    setTimeout(function() {
      console.log( location.hash );
      console.log( "You can now use your browser's back button" );
      onpopstate = e => console.log( location.hash );
    }, 150);
  }, 150);
}, 150);

关于javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58128939/

26

4

0

文章推荐： javascript - axios 不会分别返回响应和错误

文章推荐： android - 为什么部分文本位于屏幕后面？

文章推荐： MYSQL 如何比较字符串

文章推荐： javascript - 如何在函数内返回一个函数并在返回时显示它

hash - 我如何使用 std::hash::hash？
我正在尝试使用 Rust 的 std::hash 函数: use std::hash::{hash, Hash, SipHasher}; #[test] fn hash_test() { pr
ruby : Generate a Hash of Hashes from an Array of Hashes
我有以下内容 friends = [{ name: "Jack", attr1:"def", attr2:"def" }, { name: "Jill", attr1:"def", attr2:"de
ruby - 参数错误 : comparison of Hash with Hash failed - Sorting an array of hashes by hash name
我有以下数组: names = [ {"Adriana"=>{:gender=>"female", :nationality=>"danish"}}, {"Adriane"=>{:gender=>"f
Perl hash of hashes of hashes ... 是否有 'easy' 方法来获取列表末尾的元素？
我有一个哈希的 Perl 哈希......大约 11 或 12 个元素深。请原谅我没有重复下面的结构! 一些级别有固定的标签，例如'NAMES' , 'AGES'或类似的，因此访问这些级别很好，因为我
hash - 基于物理身份的替代Hashtbl.hash
我试图派生一个描述结构化值的Graphviz文件。这是出于诊断目的，因此我希望我的图形尽可能接近地反射(reflect)内存中的实际结构。我正在使用下面的方法将值映射到Graphviz顶点，以便当一个
ruby - 在 Ruby 中访问 Hash of Hash of Hash
我正在尝试获取在 xlm 中传递的事件日志条目，将它们转换为散列，然后存储到数据库中。我目前正在使用 XmlSimple gem 将 xml 输入转换为散列。测试样本输入: require 'xm
ruby - `Hash#reject!` 和 `Hash#reject` 与 `Hash#delete_if` 有何不同？
对于 Ruby 中的 Hash，reject! 和 reject 与 delete_if 有何不同？谁能用简单的代码片段解释它们之间的区别？最佳答案由于其他答案指的是 Array#delete_i
Perl Hash of Hashes 和计数
我正在尝试处理我使用 Data::Dumper 输出的 perl 数据结构 $VAR1 = 'GAHD'; $VAR2 = [ { 'COUNTRY' => 'US',
hash - DPDK Hash 无法从辅助进程中查找数据
无法使用来自辅助进程的现有 rte Hash: h = rte_hash_find_existing("some_hash"); if (h) { // this will w
Perl Hash of Hashes，获取最低数字键
我有一个散列的散列，其中第一个键是一个字符串，第二个键是一个整数。我试图在散列的散列中获得最低的第二个键。这是我的哈希。 %HoH = ( flintstones => { 8
perl - 数据库记录到 Hash-of-hashes
如何从一系列数组中生成哈希中的哈希？我需要从这里开始: my @data = /one two three/; my $value = 13: 为此: $hoh = { 'one' => { 'two
perl hash hash 中奇数个元素
我有这个配置文件 dbUser=customer dbPass=passwrd dbSid=customer.shadow passwdFile=/production/etc-user tmpUse
hash - 如何对使用rust 的单元结构执行 `Hash`？
我想实现一种thing，可以唯一标识，除此之外，它不包含其他字段。它有点像 ruby 中的 BasicObject 或 java 中的 Object。我添加了一个 PartialEq 特征。 s
ruby - Hash in Hash 给出错误的值作为返回？
我正在尝试使用以下键存储二维哈希: 维度 1 = 数字但不连续维度 2 = 字符串(如 :id 和 :value) 当元素未初始化时会出现问题。 memory = Hash.new(Hash.new
ruby - : "Hash.new takes a default value for the hash, which is the value of the hash for a nonexistent key"是什么意思
我目前正在学习 Michael Hartl 的 Ruby on Rails 教程不理解在 section 4.4.1 中找到的此语句的含义: Hashes, in contrast, are dif
ruby - 如何修改 Hash 以允许在 Ruby 中通过更短的 'hash[:a][:b]' 访问元素 'hash[:a,:b]'？
我很乐意通过更短的表达式访问多维哈希数组的任何元素 h = {a: {b: 'c'}} # default way p h[:a][:b] # => "c" # a nicer way p h[:a,
hash - 无法加载内核二进制文件 :Invalid SDK hash
我想在编写 flutter channel beta 后运行 flutter web 它回复:Can't load kernel binary:Invalid SDK hash，你知道如何解决这个问题
hash - DynamoDB : How is the hash key used?
我最近正在研究 Amazon 提供的新 NoSQL 服务，更具体地说是 DynamoDB。亚马逊说你应该避免使用不均匀分布的键作为主键，即主键应该越独特越好。我可以认为这是最好的情况下每个项目都有唯
hash - 如何在 Redis Hash 上执行搜索？
我的游戏中有很多哈希值，例如 HMSET('hash1', 'level', 25, 'connected', 2) HMSET('hash2', 'level', 50, 'connected',
hash - "over"中的 "overpass-the-hash"是什么意思？
我必须翻译这句话:'Susspected overpass-the-hash attack (Kerberos)' 我发现了这篇关于立交桥哈希的文章:https://blog.stealthbits.

首页

博学

6Ren·AI

商城

javascript - 更改 window.location.hash 在历史记录中创建条目但不影响 chrome 后退按钮