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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 1,007评论 0 0
  • 转载来源:编程学习网 1. 将彻底屏蔽鼠标右键oncontextmenu=”window.event.return...
    努力的河马君阅读 442评论 0 3
  • 10表示间隔10秒刷新一次 window.location.reload(true); 如果是你要刷新某一个ifr...
    自由加咖啡阅读 5,665评论 0 2
  • 人丑就该多看书 文章来自其他博文。 *.location.href 用法: javascript> functio...
    樱花树下_529d阅读 484评论 0 0
  • 准备写昨天因为拉肚子没有写的日记(呵呵哒,都是借口),脑中放映了一遍昨天做过的事,说过的话,发现除了还记得去医院以...
    沈小珂书单阅读 289评论 0 0

友情链接更多精彩内容