使用pushState / replaceState更改jQuery-Mobile中的url

时间:2012-08-21 18:36:27

标签: jquery-mobile pushstate

我想动态更改我的jQM页面的URL(当用户执行某些操作时)以修改查询字符串。使用history.pushState工作正常,但是当jQM尝试向URL添加哈希时,例如导航到对话框时,事情无法按预期工作:URL恢复为其原始值,jQM附加哈希值对此(更不用说当我尝试关闭对话框时发生错误)。

我研究了jQuery Mobile文档,根据我的理解,页面的原始URL存储在data-url元素的data-role="page"属性中。因此,每当我需要更改URL时,我都会尝试修改它,但在打开对话框时它仍会恢复原来的状态。

检查此JS Bin的示例:http://jsbin.com/egunif/5/edit

单击“对话框”按钮时,将更改URL(以及data-url属性),然后打开对话框。您可以看到在jQM将其更改为egunif/hashtest之前,网址会暂时更改为egunif/5#&ui-state=dialog

所以似乎原始网址存储在其他地方,问题在哪里?是否可以更改此URL,以便在jQM对其进行哈希更改时没有冲突?

谢谢!

1 个答案:

答案 0 :(得分:1)

我最后做的只是在将页面更改为对话框(在pagebeforechange处理程序中)时将网址设置回其原始值,然后在返回到新的值时将其重新替换为新值。页面(在pagechange处理程序中)。

我仍然在浏览器的调试控制台中出现错误,因为哈希值为空(可能与this issue有关),但它并没有影响网站的功能,所以我现在就把它留下来。我仍然愿意接受更好的建议!

<强>更新

在jQM的1.2.0最终版本中,引入了弹出窗口,以及通过在弹出窗口上设置data-history="false"来禁用哈希更改的选项。通过用弹出窗口替换我的所有对话框,我可以操纵网址而不必担心与之冲突 JQM。