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 - 如何在函数内返回一个函数并在返回时显示它

java - 记录 jsoup 记录
我有一个网站。必须登录才能看到里面的内容。但是，我使用此代码登录。 doc = Jsoup.connect("http://46.137.207.181/Account/Login.aspx")
email - 即使定义了 SPF 记录，也始终获得无(无 SPF 记录)
我正在尝试为我的域创建一个 SPF 记录并使我的邮件服务器能够对其进行评估。我在邮件服务器上使用 Postfix 并使用 policyd-spf (Python) 来评估记录。目前，我通过我的私有(p
dns - AWS 负载均衡器需要 @ cname 记录，但这会覆盖我的 @ MX 记录
我需要为负载平衡的 AWS 站点 mywebsite.com 添加 CName 记录。记录应该是: @ CNAME mywebsite.us-east-1.elb.amazon
记录，何时记录以及记录什么？
我目前正在开发一个相当大的多层应用程序，该应用程序将部署在海外。虽然我希望它在解聚后不会折叠或爆炸，但我不能 100% 确定这一点。因此，如果我知道我可以请求日志文件，以准确找出问题所在以及原因，那就
video - gstreamer 记录
我使用以下命令从我的网络摄像头录制音频和视频 gst-launch-0.10 v4l2src ! video/x-raw-yuv,width=640,height=480,framerate=30/1
记录 ffmpeg 控制台信息
我刚刚开始使用 ffmpeg 将视频分割成图像。我想知道是否可以将控制台输出信息保存到日志文件中。我试过“-v 10”参数，也试过“-loglevel”参数。我在另一个 SO 帖子上看到使用 ffmp
sql - 在我的查询中指定日期不会产生任何结果/记录
我想针对两个日期查询我的表并检索其中的记录。我这样声明我的变量； DECLARE @StartDate datetime; DECLARE @EndDate datetime; 并像这样设置我的变量
f# - 像Javascript对象一样循环F#记录
在 javascript 中，我可以使用简单的 for 循环访问对象的每个属性，如下所示 var myObj = {x:1, y:2}; var i, sum=0; for(i in myObj) s
visualization - 记录/可视化调用图的工具？
最近加入了一个需要处理大量代码的项目，我想开始记录和可视化调用图的一些流程，让我更好地理解一切是如何组合在一起的。这是我希望在我的理想工具中看到的: 每个节点都是一个函数/方法如果一个函数可以调用另
.net - 通过反射创建F#记录
如何使用反射在F#中创建记录类型？谢谢最佳答案您可以使用 FSharpValue.MakeRecord [MSDN]创建一个记录实例，但是我认为F#中没有任何定义记录类型的东西。但是，记录会编译为
documentation - 记录 yaml
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 3年前关闭。 Improve thi
javascript - 创建具有关联外键的新模型实例/记录
我是 Sequelize 的新手并且遇到了一些语法问题。我制作了以下模型: // User sequelize.define('user', { name: { type: DataTyp
java - 从jsp到jsp显示${}记录
${student.name} Notify 这是我的output.jsp。请注意，我已经放置了一个链接“Notify”以将其转发到 display.jsp 上。但我不确定如何将 Stud
elasticsearch - 如何搜索没有特定字段的文档/记录？
例如，这是我要做的查询: server:"xxx.xxx.com" AND request_url:"/xxx/xxx/xxx" AND http_X_Forwarded_Proto:(https O
记录 SAS 脚本
我一直在开发大量 Java、PHP 和 Python。所有这些都提供了很棒的日志记录包(分别是 Log4J、Log 或logging)。这在调试应用程序时有很大帮助。特别是当应用程序 headless
grails - 记录/Log4J到数据库
在我的Grails应用程序中，我异步运行一些批处理过程，并希望该过程记录各种状态消息，以便管理员以后可以检查它们。我考虑过将log4j JDBC附加程序用作最简单的解决方案，但是据我所知，它不使用D
记录 MQ 消息
我想将进入 MQ 队列的消息记录到数据库/文件或其他日志队列，并且我无法修改现有代码。是否有任何方法可以实现某种类似于 HTTP 嗅探器的消息记录实用程序？或者也许 MQ 有一些内置的功能来记录消息？
f# - 记录 "with"语法中的泛型
如果我有一条包含通用字段的记录，在更改通用字段时是否有任何方法可以模仿方便的 with 语法？即如果我有 type User = // 'photo can be Bitmap or Url {
java - 记录/调试我的对象的状态
假设我有一个名为 Car 的自定义对象。其中的所有字段都是私有(private)的。 public class Car { private String mName; private
二郎。记录。现有字段
当记录具有特定字段时，我需要返回 true 的函数，反之亦然。示例: -record(robot, {name, type=industrial, ho

首页

博学

6Ren·AI

商城

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