浏览器的前进后退例子

今天在项目中碰到了一个ajax调用数据加载的tab选项，点击浏览器的前进后退按钮也能够实现数据调用

1.jquery的调用方法：

原理：每个tab选项卡链接写成"#tab1","#tab2"这样点击选项卡的时候链接的hash会发生变化，一但hash发生变化时，浏览器的前进后退按钮就会发生变化，浏览器的前进后退按钮就会发生变化时，$(window).bind('hashchange',function(){})这事件就会触发，这样就可以在事件函数中调用数据了

例子：

$(window).bind('hashchange',function(){

　　$.getJSON(url,function(data){

　　})

})

$(window).trigger('hashchange')

2.iframe方法：

原理：iframe的src发生变化时，浏览器的前进后退按钮就会发生变化

例子：

父页面：

<div id="num">1</div>

function goBack(){

　　var num=document.getElementById('num').innerHTML+"1"

　　document.getElementById('iframe').src='childframe.html?url='+num

}

function getDate(str){

　　alert(str)

}

子页面：

var url=location.href.substr(location.href.indexOf('?url')+4)

parent.getDate(url)

转载于:https://www.cnblogs.com/xiaohui108/archive/2011/02/22/1961144.html