iframe结构的网站按F5刷新子页面的实现方式

Posted 2021-02-15 fengzifengfeng

有的网站或者后台系统由于页面有公共的部分，比如菜单，会把公共的部分放在一个页面，这里称之为父页面，而把具体的内容放入一个iframe中，之后的请求改变iframe的内容。但是这样会有一个问题，因为浏览器的url是父页面的链接，当你按F5刷新的时候，并不是刷新iframe所对应的页面，而是刷新了父页面，使系统回到了最初的位置，这样对操作是很不爽的。

比如，页面的格式是这样的。

 

其中index是父页面，main_ifram是iframe对应的页面。

在index的部分，添加如下js代码，用来监听在index页面的F5的刷新操作。

$("body").bind("keydown",function(event){
if (event.keyCode == 116) {
event.preventDefault(); //阻止默认刷新
$("#main_frame").attr("src",window.frames["main_frame"].src);

}
})
这样，当鼠标点击过index页面的部分后，按F5刷新，就会重新刷新iframe的页面。但是如果鼠标点击过iframe的页面，再按F5，仍然回到了最初的位置。

在每个的iframe的页面，添加以下js代码，监听iframe对应的页面的F5的刷新操作。

$("body").bind("keydown",function(event){
if (event.keyCode == 116) {
event.preventDefault(); //阻止默认刷新
//location.reload();
//采用location.reload()在火狐下可能会有问题，火狐会保留上一次链接
location=location;
}
})
你可以将这部分提取出来，每个需要的页面引用即可