history.js混淆
history.js混淆
提问于 2012-09-19 06:52:49
我对AJAX和history.js完全陌生。我想做一个基本的网站，使用AJAX来改变内容区域时，导航项目被点击，保留后退按钮功能，以及允许用户键入直接网址，如mysite.com/ page2，并有它加载的内容区域的page2。
我不知道我在做什么，但是history.js (as seen here)看起来就是我需要的。在测试中，我不知道从哪里开始。任何帮助都是非常感谢的！
--编辑的jQuery脚本
<html>
<head>
<title>test page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!-- jQuery ScrollTo Plugin -->
<script defer src="http://balupton.github.com/jquery-scrollto/scripts/jquery.scrollto.min.js"></script>
<!-- History.js -->
<script defer src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<!-- This Gist -->
<script defer src="http://gist.github.com/raw/854622/ajaxify-html5.js"></script>
<script type="text/javascript">
$(window).bind("statechange", function(e) {
var State = window.History.getState();
if (window.console && window.console.log) {
console.log("popstate", State, window.location.href);
}
$("#changehere").text(typeof State.data.changehere !== 'undefined' ? State.data.changehere : State.url);
$('.nav').click(function() {
alert(this);
window.History.pushState({changehere:this}, this + 'title', '?' + this);
})
})
</script>
<style type="text/css">
#one {
height: 300px;
width: 1000px;
background: #a0a0a0;
}
</style>
</head>
<body>
<div id="one">
<a href="xml/first.html" id="first">change1</a>
<a href="xml/second.html" id="second">change2</a>
<a href="xml/third.html" id="third">change3</a>
</div>
<div id="changehere">
start
</div>
</body>
回答 1
Stack Overflow用户
发布于 2013-06-11 18:43:28
您需要拦截相对链接上的所有点击，并为每次点击调用一个History.pushState。参见https://github.com/browserstate/ajaxify。
相关的部分是：
$.fn.ajaxify = function(){
// Prepare
var $this = $(this);
// Ajaxify
$this.find('a:internal:not(.no-ajaxy)').click(function(event){
// Prepare
var
$this = $(this),
url = $this.attr('href'),
title = $this.attr('title')||null;
// Continue as normal for cmd clicks etc
if ( event.which == 2 || event.metaKey ) { return true; }
// Ajaxify this link
History.pushState(null,title,url);
event.preventDefault();
return false;
});
// Chain
return $this;
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12486224
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号