HTML5将外部内容加载到div并使用pushState()?

时间:2012-08-17 03:07:08

标签: javascript jquery html html5

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

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

因此,所有这些页面都有一个名为“contentDiv”的div,它具有相应的副本/文本。用户通过“index.html”进入网站,如果用户点击了导航链接之一:

关于|工作|投资组合|接触

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

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

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

<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()调用。

让我们说如果我像这样编码nav href标签:

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

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

我想要做的确实可行,我只是不知道如何处理它。如果有人能帮助我,这将是美好的。

原谅我,这么长的描述。

谢谢。

2 个答案:

答案 0 :(得分:1)

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

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

感谢。

答案 1 :(得分:0)

此代码将实现您需要执行的操作,并通过禁用javascript支持用户。

$('a').click(function() {
  window.location.hash = $(this).attr('src');
  return false;
}

如果点击“关于”链接,您的网址将类似于http://www.yoursite.com/#about.html,并且当您刷新时它们会正常工作。 如果您想了解有关制作ajax网站的更多信息,我建议您访问此博客Css-Tricks.com