Question

我有一个主页“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“。

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

原谅我，这么长的描述。

谢谢。

Answer 1

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

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

感谢。

Answer 2

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

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

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

HTML5将外部内容加载到div并使用pushState（）？

2 个答案: