iframe结构的网站按F5刷新子页面的实现方式
有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个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刷新子页面的实现方式的更多相关文章
- AngularJS ui-router刷新子页面路由
网上有各种刷新子页面路由的方法,但是不知道为什么放到我的页面就不行了,尴尬! 网上的方法有: <a href="#" ui-sref="app.toMenu&quo ...
- mui---父页面跳子页面刷新子页面
最近在做项目,遇到一个问题,从父页面跳转到子页面,不会刷新子页面的问题. 解决方法:可以在跳转的时候,使用openWindow来进行跳转,接下来配置跳转打开页面的参数: 具体如下: mui.openW ...
- iframe 框架父页面刷新子页面
1.父页面添加: <script> function testBtn(){ var reshSrc = document.getElementById('myFrame').src; ...
- vue刷新子页面,跳到主页,params传参引起的血案!
今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...
- React报错:Laravel React-Router browserHistory 刷新子页面报错404
举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常 原因是少路由.web.php添加路由 Route ...
- HTML子页面保存关闭并刷新父页面
1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() { window.parent.Re ...
- vue项目,子页面刷新404问题
翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...
- JS刷新窗口的几种方式
浮层内嵌iframe及frame集合窗口,刷新父页面的多种方法 <script language=JavaScript> parent.location.reload(); ...
- js父页面和子页面之间传值
今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...
随机推荐
- input file multiple 配合springmvc实现多文件上传
.前端页面的样子 <input id="file" name="file" type="file" multiple="mu ...
- C语言:假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母。-利用折半查找整数m在有序数组中的位置,若找到,返回下标值,否则返回-1。
//假定输入的字符串只包含字母和*号,fun函数:除了尾部的*号以外,将字符的其他*号进行全部删除,形参p已经指向字符串中最后一个字母. #include <stdio.h> void f ...
- 重磅消息,Micrium的uCOS全家桶将推出免费商业授权
说明: 1.预计将在下个月末的Embedded World 2020正式宣布开源免费商用. 2.uCOS全家桶一旦宣布免费商用,将给那些还在收费的RTOS带来一波冲击.其中最值的关注的是去年微软收购T ...
- 转:建立maven私服
一.下载安装与配置 下载 到官网下载:https://www.sonatype.com/download-oss-sonatype image.png 下载的是oss3.x版本的(当时最新版), ...
- nfs的原理 安装配置方法 centos6.5
NFS周边 Network File System 作用 像访问本地文件一样去访问NFS服务器上的文件,目录 引用场景: ..1 用户上传的静态文件---图片,视频,用户上传的视频,头像 ..2 中小 ...
- 创业学习--《预判行业机会》--B-2.预判模块---HHR计划--以太一堂
一,<开始学习> 1,行业机会的判断,是可以通过不断地训练提高自己的判准的概率的,要科学思考创业. 2,创业者在行业机会上的三个问题: a. 对市场变化,敏感性太弱,没有洞察行业的意识. ...
- JavaScript 深度遍历对象的两种方式,递归与非递归
递归遍历: 基本问题: 当前属性值不为对象时,打印键和值 递归过程:当前属性值为对象时,打印键,继续递归 var o = { a: { b: { c: { d: { e: { f: 1, g:{ h: ...
- 吴裕雄--天生自然Numpy库学习笔记:NumPy 数组属性
NumPy 数组的维数称为秩(rank),秩就是轴的数量,即数组的维度,一维数组的秩为 1,二维数组的秩为 2,以此类推. 在 NumPy中,每一个线性的数组称为是一个轴(axis),也就是维度(di ...
- 吴裕雄 python 神经网络——TensorFlow 图像处理函数
import numpy as np import tensorflow as tf import matplotlib.pyplot as plt image_raw_data = tf.gfile ...
- 杭电 1059 Dividing
Dividing Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...