jQuery $.address() 插件:hashbang 链接与 HTML5 状态支持发生冲突

发布于 2024-11-09 21:47:27 字数 706 浏览 4 评论 0原文

以下是描述该问题的场景:

用户 A 的浏览器支持 HTML5 状态,并将此链接发送给用户 B:

http://domain.tld/node

用户B 使用不支持 HTML 5 状态的浏览器,导航到另一个节点,并将链接发送回用户 A:

http://domain.tld/node#!/another-节点

但是当用户A点击该链接时,显示 /node 而不是 /another-node

查询 Asual 的 jQuery $.address() 插件 显示它是将“hashbang 地址”解释为哈希值:(

> $.address.value()
  "/node#/another-node"
> $.address.path()
  "/node"
> $.address.hash()
  "/another-node"

奇怪的是,“!”从 hashbang 中删除了。)

可以通过更改我的实现来克服这种歧义吗?

如果在 URI 中找到 hashbang,我可以禁用对历史记录 API 的支持,但我不愿意这样做。

Here's a scenario that describes the problem:

User A has a browser with HTML5 state support, and sends this link to User B:

http://domain.tld/node

User B, who uses a browser without HTML 5 state support, navigates to another node, and sends the link back to User A:

http://domain.tld/node#!/another-node

But when User A clicks the link, the content for /node is shown instead of /another-node.

Querying Asual's jQuery $.address() plugin shows that it is interpreting the "hashbang address" as the hash value:

> $.address.value()
  "/node#/another-node"
> $.address.path()
  "/node"
> $.address.hash()
  "/another-node"

(Curiously the "!" is dropped from the hashbang.)

Can this ambiguity be overcome with a change in my implementation?

I could disable support for the history API if a hashbang is found in the URI, but I'd rather not.

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

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

发布评论

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

评论(1

枯叶蝶 2024-11-16 21:47:27

我能够通过稍微改变我的实现来解决这个问题。

基本上,我根据浏览器的功能确定地址应该是什么,并根据地址实际情况进行检查,如果不匹配,则使用 location.replace() code> 替换地址而不创建新的历史记录条目。

var addressValue = $.address.value(),
    initPath = window.location.pathname.replace(stateBasePath, ""),
    newLocation = baseUrl +stateBasePath + (supports_history_api() ? "" : "/#!") + (addressValue != "/" ? addressValue : initPath + window.location.search);
if (newLocation != window.location.href) {
    window.location.replace(newLocation);
}

该代码应该尽快执行——在 DOM 就绪函数之外。

  • stateBasePath 相当于您用于 $.address.state() 的值(如果站点位于文档根目录,则只是一个空字符串)
  • baseUrl 是 URI 协议和域,例如 http://domain.tld(无尾部斜杠)
  • supports_history_api() 是取自 马克朝圣者

I was able to solve this issue by changing my implementation a bit.

Basically, I determine what the address should be based on the browser's capabilities, check that against what the address actually is, and if it doesn't match, use location.replace() to replace the address without creating a new history entry.

var addressValue = $.address.value(),
    initPath = window.location.pathname.replace(stateBasePath, ""),
    newLocation = baseUrl +stateBasePath + (supports_history_api() ? "" : "/#!") + (addressValue != "/" ? addressValue : initPath + window.location.search);
if (newLocation != window.location.href) {
    window.location.replace(newLocation);
}

This code should be executed as soon as possible – outside of a DOM ready function.

  • stateBasePath is equivalent to the value you would use for $.address.state() (just an empty string if the site is located at the document root)
  • baseUrl is the URI protocol and domain, e.g. http://domain.tld (no trailing slash)
  • supports_history_api() is a little ditty taken from Mark Pilgrim
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文