有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个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;
}
})
你可以将这部分提取出来,每个需要的页面引用即可

iframe结构的网站按F5刷新子页面的实现方式的更多相关文章

  1. AngularJS ui-router刷新子页面路由

    网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...

  2. mui---父页面跳子页面刷新子页面

    最近在做项目,遇到一个问题,从父页面跳转到子页面,不会刷新子页面的问题. 解决方法:可以在跳转的时候,使用openWindow来进行跳转,接下来配置跳转打开页面的参数: 具体如下: mui.openW ...

  3. iframe 框架父页面刷新子页面

    1.父页面添加: <script> function testBtn(){   var reshSrc = document.getElementById('myFrame').src; ...

  4. vue刷新子页面,跳到主页,params传参引起的血案!

    今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...

  5. React报错:Laravel React-Router browserHistory 刷新子页面报错404

    举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...

  6. HTML子页面保存关闭并刷新父页面

    1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() {            window.parent.Re ...

  7. vue项目,子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  8. JS刷新窗口的几种方式

    浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法   <script language=JavaScript>       parent.location.reload(); ...

  9. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

随机推荐

  1. django 项目发布(centos 6.5 + python 3.5 + django1.9.8 + paramiko 2.0.2 + gunicorn )

    环境 os centos 6.5 64bit python 3.5 django 1.9.8 paramiko 2.0.2 gunicorn 19.6.0 安装 centos install pyth ...

  2. PAT 1017 Queueing at Bank (模拟)

    Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...

  3. nginx 解决 connect() failed (111: Connection refused) while connecting to upstream,

    嗯哼,刚装了个ubuntu的lnmp,我的天啊,踩的坑比我脂肪还多了 比如刚装完的时候访问显示502, 也不知道什么问题,就去看了一下nginx日志  /var/log/nginx/error.log ...

  4. SPOJ Distinct Substrings

    给定一个字符串,求不相同子串个数.每个子串一定是某个后缀的前缀,那么原问题等价于求所有后缀之间的不相同子串个数.总数为n*(n-1)/2,再减掉height[i]的和就是答案 #include< ...

  5. java篇 之 多态

    2018-9-28 多态: 重载也称为静态多态(静态在编译阶段就能确定)(动态是跟运行时挂钩) 尽量去选择关系轻的,降低耦合度(紧密度) 内聚: 减少与外界的联系,降低与其他对象和类的联系 对象与对象 ...

  6. 《实战Java高并发程序设计》读书笔记四

    第四章 锁的优化及注意事项 1.锁性能的几点建议 减小锁持有时间: 系统持有锁时间越长锁竞争程度就越激烈,只对需要同步的方法加锁,可以减小锁持有时间进而提高锁性能. 减少锁的持有时间有助于降低锁冲突的 ...

  7. 四、Python文件操作

    描述:Python的文件操作涉及对文件的读/写与编码的处理. 1.两种写法 1.1 第一种 1 f = open('文件路径', '文件操作方式', encoding='utf-8') 2 对文件操作 ...

  8. BZOJ5319/LOJ2551「JSOI2018」列队

    问题描述 作为一名大学生,九条可怜在去年参加了她人生中的最后一次军训. 军训中的一个重要项目是练习列队,为了训练学生,教官给每一个学生分配了一个休息位置.每次训练开始前,所有学生都在各自的休息位置休息 ...

  9. Tomcat部署Web项目的3种方式

    一.将war包丢进webapps 这是最简单粗暴的方式:将web工程打成war,丢进tomcat/webapps目录即可,tomcat会自动解压.无需修改任何配置文件即可完成部署. 这里我准备了tom ...

  10. c++开源库rapidxm

    1.引入头文件: 一般用到的头文件: #include "rapidxml/rapidxml.hpp" #include "rapidxml/rapidxml_utils ...