📄 13.2.4.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New document</title>
</head>
<body>
<br/><br/><br/>
<a href="javascript:void(0)" onclick="setP1()">link1</a>
<a href="javascript:void(0)" onclick="setP2()">link2</a>
<a href="javascript:void(0)" onclick="setP3()">link3</a>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
<iframe name="hframe" src="history.html" style="display:none"></iframe>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//prototype-1.3.1框架中为函数对象定义的bind方法，下面有介绍
Function.prototype.bind = function(object) {
var __method = this;
return function() {
__method.apply(object, arguments);
}
}
//定义前进后退处理类及构造函数
function BackButtonFixer(){
//用于存储需要进行状态记录的函数
this.actions={};
//Qs用于存储变化前的状态，以备比较哪些函数发生了变化，需要重新调用
this.Qs="";
//设置定时器用于检测隐藏框架的URL是否变化
window.setInterval(this.load.bind(this),100);
}
//注册一个需要实现前进后退按钮的动作
BackButtonFixer.prototype.register=function(s,doAction,undoAction){
//将一对函数记录下来
this.actions[s]={doAction:doAction,undoAction:undoAction}
}
//每个注册的方法在调用时都需要改变隐藏框架的URL地址，以被浏览器记录
BackButtonFixer.prototype.toQs=function(s){
var Qs=window.frames.hframe.location.search;
Qs=Qs.slice(1,Qs.length);
var arrQs=Qs.split(".");
if(Qs.length==0)arrQs=[];
var exist=false;
for(var i=0;i<arrQs.length;i++){
if(arrQs[i]==s){
exist=true;
break;
}
}
if(!exist)arrQs.push(s);
//改变隐藏框架的URL
this.Qs=window.frames.hframe.location.search="?"+arrQs.join(".");
}
//根据框架页的查询字符串数据来进行调用
BackButtonFixer.prototype.load=function(){
//获取框架也表示的查询字符串
var Qs1=window.frames.hframe.location.search;
//判断框架内的Qs地址是否发生变化，如果没变则直接返回
if(this.Qs==Qs1)return;
//获取当前的状态，以函数调用轨迹的形式表示
Qs1=Qs1.slice(1,Qs1.length);
var arrQs1=Qs1.split(".");
if(Qs1.length==0)arrQs1=[];
//将函数标识符做成哈希表的形式，方便后面的比较
var objQs1={};
for(var i=0;i<arrQs1.length;i++)objQs1[arrQs1[i]]=true;
//获取新的状态
var Qs2=this.Qs.slice(1,this.Qs.length);
var arrQs2=Qs2.split(".");
if(Qs2.length==0)arrQs2=[];
//将函数标识符做成哈希表的形式，方便后面的比较
var objQs2={};
for(var i=0;i<arrQs2.length;i++)objQs2[arrQs2[i]]=true;
//比较两个状态，找出新增加的函数，调用doAction中存储的函数
for(var i=0;i<arrQs1.length;i++){
//如果新增加了函数，则调用doAction
if(!objQs2[arrQs1[i]])this.actions[arrQs1[i]].doAction();
}
//比较两个状态，找出减少的函数，调用undoAction中存储的函数
for(var i=0;i<arrQs2.length;i++){
//如果是减少了函数，则调用undoAction
if(!objQs1[arrQs2[i]])this.actions[arrQs2[i]].undoAction();
}
//将切换完成的状态设置为当前状态
this.Qs="?"+Qs1;
}
//创建对象
var bbf=new BackButtonFixer();
//注册函数
bbf.register("p1",setP1,undoSetP1);
bbf.register("p2",setP2,undoSetP2);
bbf.register("p3",setP3,undoSetP3);
function setContent(containerId,content){
container=document.getElementById(containerId);
container.innerHTML=content;
}
//设置p1结点的内容
function setP1(){
setContent("p1","here is p1 content");
//将状态存储到URL中
bbf.toQs("p1");
}
//取消设置p1结点的内容
function undoSetP1(){
setContent("p1","p1");
}
//设置p2结点的内容
function setP2(){
setContent("p2","here is p2 content");
bbf.toQs("p2");
}
//取消设置p2结点的内容
function undoSetP2(){
setContent("p2","p2");
}
//设置p3结点的内容
function setP3(){
setContent("p3","here is p3 content");
bbf.toQs("p3");
}
//取消设置p3结点的内容
function undoSetP3(){
setContent("p3","p3");
}
//-->
</script>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -