美文网首页
JS——按F5刷新iframe结构子页面方式

JS——按F5刷新iframe结构子页面方式

作者: 新人学开发 | 来源:发表于2017-12-04 11:49 被阅读0次

网站后台一般会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个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等同于刷新框架,不加载父页面

相关文章

网友评论

      本文标题:JS——按F5刷新iframe结构子页面方式

      本文链接:https://www.haomeiwen.com/subject/imntixtx.html