Chrome 和 Firefox 之间的差异:重新加载运行 Javascript 游戏的页面

发布于 2024-12-01 13:27:43 字数 655 浏览 1 评论 0原文

我对 Javascript 和 Web 编程总体来说是新手,所以这可能是一个愚蠢的错误。尽管如此,我在寻找相关信息时遇到了问题。

我正在用 Javascript 开发一个游戏,玩家可以通过点击并让他们的化身走到不同的建筑物/物体来四处走动并从一个场景移动到另一个场景。目前,如果检测到冲突,我只需调用 this.gotoTimer = setTimeout(self.location = this.targetURL, 1000); 来更改页面位置。

该页面链接在两种浏览器中都正常。问题是当用户按下后退按钮时......在 Chrome 中,一切都会重置;播放器在我在代码中设置的同一区域中生成,并且所有“链接目标”仍然有效。这是期望的行为。

在 Firefox 中,一旦按下后退按钮并重新加载页面,玩家就会处于他/她最后已知的位置,并且他们访问的链接目标将不再链接......我最终可以通过访问它们并按返回按钮。

根据我的研究,这似乎是 Firefox 处理缓存的方式存在问题,我找到的解决方法包括向 Javascript 文件附加随机数或时间。这让我觉得很恶心。我可能也还差得远。

所以我想知道两件事:

  1. 这是对问题的准确假设,还是还有其他问题?
  2. 如果是,附加这些数字的最佳方法是什么?整个概念对我来说似乎很老套......

I'm new to Javascript and web programming in general, so this may be a silly mistake. Nevertheless, I've had problems finding information about it.

I am developing a game in Javascript, where the player can walk around and move from scene to scene by clicking and having their avatar walk to different buildings/objects. For now, I just have the page change location, by calling this.gotoTimer = setTimeout(self.location = this.targetURL, 1000); if a collision is detected.

The page links fine in both browsers. The problem is when the user presses the back button...In Chrome, everything resets; The player spawns in the same area as I have it set up in code, and all of the 'linktargets' are still valid. This is the desired behavior.

In Firefox, once the back button is pressed and the page reloads, the player is at his/her last known position, and the linktarget they visited will no longer link...I can eventually deactivate all of them by visiting them and pressing the back button.

From what I've been able to research, it seems to be a problem with how Firefox treats the cache, and the workaround I've been able to find involves appending a random number or the time to the Javascript files. This strikes me as gross. I may also be way off.

So I'm wondering two things:

  1. Is this an accurate assumption of the problem, or is there another issue?
  2. If it is, what is the best way to append these numbers. The entire concept seems very hacky to me...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

讽刺将军 2024-12-08 13:27:43

抱歉这么久才放弃这个问题,但我找到了一个有效的解决方案!

我现在打电话
window.location.reload(true);
在我打电话之前
window.location = 无论Url;

...我不确定为什么它工作得这么好(我认为 window.location.reload 会在进入新页面之前重新加载当前页面[这显然不是我想要的]),但看起来不错。我猜它可能在背后做一些我不知道的事情,但从功能上来说它正在做我想做的事情。

Sorry to abandon the question for so long, but I found a solution that worked!

I now call
window.location.reload(true);
before I call
window.location = whateverUrl;

...I'm not sure why it works so well (I figured window.location.reload would reload the current page before going to the new one [that obviously isn't what I would want]), but it seems fine. It may be doing something I don't know behind my back I guess, but functionally it is doing what I want.

笔芯 2024-12-08 13:27:43

请参阅 pageshow 事件 的文档。现代浏览器在返回时实际上并不重新加载页面,而是将其及其 JavaScript 状态一起恢复。因此,您有多种选择:

  • 添加一个 unload 事件处理程序来禁用此行为(次优,会降低性能)。
  • 使用 window.location.replace() 而不是分配给 window.location,这将阻止用户返回(我猜这是不可取的)。
  • 添加 pageshow 事件处理程序以重置 JavaScript 状态。
  • 更改逻辑,使其不再假设用户在单击链接后将离开并且永远不会返回。

See documentation of the pageshow event. Modern browsers don’t actually reload the page when going back, they rather restore it along with its JavaScript state. So you have several options:

  • Add an unload event handler to disable this behavior (suboptimal, degrades performance).
  • Use window.location.replace() instead of assigning to window.location, this will prevent the user from going back (undesirable I guess).
  • Add a pageshow event handler to reset JavaScript state.
  • Change the logic so that it no longer assumes that the user will go away and never return after clicking a link.
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文