javascript - HTML5 将外部内容加载到 div 中并使用pushState()？

Question

我有一个主页“index.html”。该主页是使用 HTML5 完成的网站入口。该网站还有其他页面:

“about.html”、“work.html”、“portfolio.html”、“contact.html”

因此，所有这些页面都有一个名为“contentDiv”的 div，其中包含相应的副本/文本。用户通过“index.html”进入网站，如果用户单击以下导航链接之一:

关于|工作|投资组合 |联系方式

“index.html”页面使用 JQuery 的 load() 调用加载点击页面的“contentDiv”内容，然后使用动画在加载的 div 中滑动。

网站向后兼容，因此如果禁用 Javascript，则用户将被带到单击的页面，而不是让“index.html”通过 load() 调用加载内容。

顺便说一句，导航链接的编码如下:

<a href="about.html" title='About'>About</a>

一旦“index.html”加载了请求的内容，通过使用pushState()，URL就会被更新。因此，如果用户单击“about”链接，则 pushState() 会将 URL 更新为:

“http://www.abc.com/about.html”

我没有在 href 标签中插入任何哈希值的原因是，我希望网站有一个后备，以防 Javascript 被禁用。这样，用户可以被定向到请求的页面('about.html')而不是“index.html”。

到目前为止，一切都按预期进行，但问题在于。当用户位于“index.html”并单击任何部分(例如“about.html”)时，将加载内容并通过 PushState() 更新 URL。所以现在的 URL 是“http://www.abc.com/about.html”。现在，如果用户刷新页面(“index.html”)，则加载“about.html”而不是“index.html”执行 load() 调用。

假设我像这样编写导航 href 标签:

<a href="#about" title="about">About</a>

那么 URL 最终会包含一个哈希值。如果我复制链接“http://www.abc.com/#about”并通过电子邮件发送给用户，并且如果用户尝试通过浏览器禁用 javascript 打开该链接，则用户将无法访问“about” .html”，因为链接只有“#about”，而不是“about.html”。

我想做的确实是可行的，我只是不知道如何实现。如果有人能在这方面帮助我，那就太好了。

请原谅我这么长的描述。

谢谢。

Answer 1

我最终将所有导航 href 设置为“”。然后在 document.ready() 函数上设置 href 值。

$('a[rel=nav]').attr('href', '');

谢谢。