处理AJAX站点的哈希URL的更好方法

时间:2011-11-04 18:25:46

标签: javascript ajax html5 back-button history.js

除非这是HTML 5,否则当AJAX加载其他页面时我可以轻松使用history.pushState()来操作URL,我发现处理在URL地址栏中使用井号标记的页面不方便。

例如,加载了page item1.html。用户点击下一项 - item2.html页面加载了AJAX。地址在浏览器中更改为item1.html#item2.html。

现在,当用户将此网址发送给朋友或为其添加书签时,我想确保加载了item2.html。

方法1)JavaScript会将URL item1.html#item2.html重定向到item2.html。缺点:在重定向之前,item1.html被加载并闪烁一秒。

方法2)加载item1.html并隐藏item1内容,然后使用Ajax请求加载item2.html。缺点:item1内容仍然可见(除非我隐藏它,但没有可见性,这可能对SE不利)

更好的方法?我必须找到一个很好的解决方案,许多大型网站都会实施。

2 个答案:

答案 0 :(得分:0)

不要将#部分视为文件的URL。这是页面的逻辑状态。

对我来说,我认为这意味着有一个像page.html,它本身可能没有真正的内容。然后你有page.html#item1和page.html#item2等。网址总是一致的。你永远不会真正直接导航到item1.html或item2.html。

答案 1 :(得分:0)

正如上面提到的IL,你想要你的AJAX应用程序的'shell'(紧接在URL中的哈希标记之前的文件,例如:page.html)只能作为加载item1.html的容器, item2.html等通过AJAX。为了确保在用户第一次到达应用程序时将哈希标记之后引用的资源加载到空shell中,您需要在window.onload(或$(document).ready()中调用函数。你正在使用jQuery)将location.hash读入适当的AJAX调用,如果location.hash是未定义的,则为默认方案,空白或返回AJAX错误的值。

为了“美化”您的网址以便在搜索引擎中轻松输入和编制索引,您需要在网站的根目录设置一个重写干净网址的.httaccess文件(例如:http://example.com/item1 )进入具有哈希值的文件位置(例如:http://example.com/page.html#item1),以便您的引擎可以理解它并加载适当的资源。