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

我有一个主页“index.html”。这个主页是通过HTML5完成的网站入口。还有其他网页的网站：HTML5将外部内容加载到div并使用pushState（）？

“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被更新。因此，如果用户点击“关于”链接，然后pushState的（）更新网址：

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

我之所以没有插入任何散列成href标签，因为我希望网站有一个后备箱，以防止Javascript被禁用。这样，用户可以被定向到请求的页面（'about.html'）而不是“index.html”。

到目前为止，所有的预期效果都很好，但这里是问题所在。当用户在“index.html”上并点击任何一个部分，例如“about.html”时，内容被加载并且URL通过pushState（）更新。所以现在URL是“http://www.abc.com/about.html”。现在，如果用户刷新页面（“index.html”），则会执行“about.html”而不是执行load（）调用的“index.html”。

比方说，如果我的代码的导航HREF标记是这样的：

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

那么URL结束有它的哈希值。如果我将链接“http://www.abc.com/#about”复制并通过电子邮件发送给用户，并且用户试图通过JavaScript禁用的浏览器打开链接，则用户将无法获得“about .html“，因为链接只有'#about'而不是”about.html“。

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

原谅我，这么长的描述。

谢谢。

来源

2012-08-17 Combustion007

所以你遇到的问题是刷新？你为什么把hashtag放在href里面？ – ama2 2012-08-17 03:18:38

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

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

谢谢。

来源

2012-08-26 20:57:51 Combustion007

此代码将实现您需要做的并且禁用javascript支持用户。

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

您的网址就会看起来像http://www.yoursite.com/#about.html如果你点击有关链接上，当你刷新他们的工作。如果你想了解更多关于制作阿贾克斯网站，我建议你访问这个博客Css-Tricks.com

来源

2012-08-17 03:29:59 FrameDev

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

回答

相关问题