javascript window.history对象如何应用(javascript,web开发)

第三个页面：

<h3>第三个页面</h3>
<buttonclass="next">去到第四页</button>
<hr/>
<h4>window.history对象提供的方法</h4>
<buttonclass="back">window.history.back()</button>
<buttonclass="forward">window.history.forward()</button>
<buttonclass="go">window.history.go(2)</button>
<buttonclass="length">window.history.length</button>
<script>
varnextBut=document.querySelector('.next');
varbackBut=document.querySelector('.back');
varforwardBut=document.querySelector('.forward');
vargoBut=document.querySelector('.go');
varlengthBut=document.querySelector('.length');
nextBut.onclick=function(){
document.location.href='11第4个页面.html';
}
backBut.onclick=function(){
window.history.back()
}
forwardBut.onclick=function(){
window.history.forward()
}
goBut.onclick=function(){
window.history.go(2)
}
lengthBut.onclick=function(){
console.log(window.history.length)
}
</script>

效果图如下：当单击”去到第四页“按钮时：

第四个页面：

<h3>第四个页面</h3>
<buttonclass="next">回到首页</button>
<hr/>
<h4>window.history对象提供的方法</h4>
<buttonclass="back">window.history.back()</button>
<buttonclass="forward">window.history.forward()</button>
<buttonclass="go">window.history.go(2)</button>
<buttonclass="length">window.history.length</button>
<script>
varnextBut=document.querySelector('.next');
varbackBut=document.querySelector('.back');
varforwardBut=document.querySelector('.forward');
vargoBut=document.querySelector('.go');
varlengthBut=document.querySelector('.length');
nextBut.onclick=function(){
document.location.href='11window.history对象.html';
}
backBut.onclick=function(){
window.history.back()
}
forwardBut.onclick=function(){
window.history.forward()
}
goBut.onclick=function(){
window.history.go(2)
}
lengthBut.onclick=function(){
console.log(window.history.length)
}
</script>

效果图如下：当单击”回到首页“按钮时：

相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。