网站后台一般会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个iframe中,之后的请求只改变iframe的内容
但是这样会有一个问题,因为浏览器的url是父页面的链接,当你按F5刷新的时候,并不是刷新iframe所对应的页面,而是刷新了父页面,使系统回到了最初的位置,这样对操作是很不爽的
假设:其中index.php是父页面,Mainindex是对应的iframe框架ID,site/index.php是对应加载的子页面
index.php:
<body><div>
<iframe id="Mainindex" name="Mainindex" src="site/index.php"></iframe>
</div></body>
在index的部分,添加如下js代码,用来监听在index页面的F5的刷新操作
$("body").bind("keydown",function(event){
if(event.keyCode == 116) {
event.preventDefault();//阻止默认刷新
$("#main_frame").attr("src",window.frames["main_frame"].src);
}
})
在iframe的子页面site/index.php中,添加以下js代码(或新建js文件引用),监听iframe对应的页面的F5的刷新操作
$("body").bind("keydown",function(event){
if(event.keyCode == 116) {
event.preventDefault(); //阻止默认刷新
//location.reload(); //采用location.reload()在火狐下可能会有问题,火狐会保留上一次链接
location=location;
}
})
这样,即可实现网站后台iframe下的子页面,按F5,只刷新iframe引用的子页面,不会刷新到主页面
即:F5等同于刷新框架,不加载父页面