浏览器的前进后退例子

今天在项目中碰到了一个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/p/1961144.html