歌剧 11.50+实现history.replaceState()

发布于 2024-12-25 17:27:04 字数 1036 浏览 3 评论 0原文

考虑这个jsfiddle: http://fiddle.jshell.net/maple/JbEJN/show/ (这是结果窗口,为了使 ReplaceState 正常工作,请参阅 实际的代码这里:http://jsfiddle.net/maple/JbEJN/)。

这是一个简单的 javascript 选项卡控件。我单击“Tab 1”并查看一个 div 的内容。我单击“Tab 2”隐藏正在显示的 div 并显示另一个具有不同内容的 div。您可以获得标准选项卡控件的练习。

现在,我想做是使用主题标签来为页面添加书签或链接到选定的某个选项卡。我想要的是每次在选项卡之间切换时创建一个浏览器历史记录条目,这样当我按回键时,我必须循环浏览 10 个选项卡,然后才能真正返回到我来的页面从。

我打算实现这一点的方法是,当我在选项卡之间切换时使用replaceState(),将主题标签插入到页面的 URL 中,如下所示:

window.history.replaceState(null, '', '#tabname');

我期望这里发生的是,在选项卡之间切换时不会创建任何历史记录条目,因此,当我在选项卡之间切换几次时,我会看到哈希标记发生变化,但是当我点击后退按钮时,我只是返回到上一页(或者如果我在新窗口中打开测试页面,则什么也不会发生)。

这在 Chrome、Firefox 和 Safari 中运行良好,但在 Opera 11.50 和 11.60 中不起作用。据我所知,Opera 声称完全支持 Opera 中的历史 API,但 Opera 中发生的情况是,replaceState() 的工作方式与 pushState() 类似,条目被放入历史记录中。

这是 Opera 中的错误,还是我应该在 Opera 中以某种不同的方式使用 API?

Consider this jsfiddle: http://fiddle.jshell.net/maple/JbEJN/show/ (this is the result window, in order for replaceState to work, see actual fiddle with code here: http://jsfiddle.net/maple/JbEJN/).

This is a simple javascript tab control. I click 'Tab 1' and see the contents of one div. I click 'Tab 2' to hide the div that was showing and show another one, with different content. You get the drill, standard tab control.

Now, what I do want is to use hashtags to be able to bookmark or link the page with a certain tab selected. What I don't want is to create a browser history entry each time I switch between tabs so that when I press back I have to circle through 10 tabs before I can actually go back to the page I came from.

The way I intend to implement this is by using replaceState() when I switch between tabs to insert a hashtag into the url of the page, like so:

window.history.replaceState(null, '', '#tabname');

What I expect to happen here is that no history entries are created when switching between tabs, so when I switch a few times between tabs I see the hashmark change, but when I hit the back button I just go back to the previous page (or nothing happens if I opened the test page in a new window).

This works fine in Chrome, Firefox and Safari, but not Opera 11.50 and 11.60. As far as I know Opera claims to fully support the history API in Opera, but what happens in Opera is that replaceState() works like pushState(), entries get put into history.

Is this a bug in Opera, or should I use the API in some different manner in Opera?

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

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

发布评论

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

评论(1

岛徒 2025-01-01 17:27:04

我想这里发生的事情是点击事件的默认操作是激活链接 - 因此在调用replaceState()之后,默认操作将更新URL,添加#tabname,并创建历史记录条目。尝试使用event.preventDefault()
http://jsfiddle.net/JbEJN/8/show/

我不知道为什么您的原始代码在 Chrome 和 Firefox 中按预期运行。如果replaceState()已经更新了URL并且链接的激活不会改变它,那么他们可能不会创建历史记录条目?如果是这样,Opera 可能应该进行更改以匹配它们。您能否将此问题报告为 https://bugs.opera.com/wizard/ 上的问题?如果您给我错误参考 ID,我会跟进。

I guess what's happening here is that the click event's default action is to activate the link - so after you call replaceState() the default action will update the URL, add #tabname, and create a history entry. Try to use event.preventDefault():
http://jsfiddle.net/JbEJN/8/show/

I'm not sure why your original code worked as intended in Chrome and Firefox. Presumably they do not create a history entry if replaceState() already updated the URL and the link's activation won't change it? If so, Opera should probably change to match them. Could you report this as an issue on https://bugs.opera.com/wizard/ ? If you give me the bug reference ID I'll follow up.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文