JS刷新页面总结

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量1.2w 收藏 10
点赞数
分类专栏： 收藏夹 文章标签： javascript html 框架 脚本 button function

先来看一个简单的例子：
下面以三个页面分别命名为frame.htm、top.htm、bottom.htm为例来具体说明如何做。

frame.htm 由上(top.htm)下(bottom.htm)两个页面组成，代码如下：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > frame </ TITLE >
</ HEAD >
< frameset rows ="50%,50%" >
< frame name =top   src ="top.htm" >
< frame name =bottom   src ="bottom.htm" >
</ frameset >
</ HTML >

 

现在假设top.htm (即上面的页面) 有七个button来实现对bottom.htm (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。

语句1. window.parent.frames[1].location.reload();
语句2. window.parent.frames.bottom.location.reload();
语句3. window.parent.frames["bottom"].location.reload();
语句4. window.parent.frames.item(1).location.reload();
语句5. window.parent.frames.item('bottom').location.reload();
语句6. window.parent.bottom.location.reload();
语句7. window.parent['bottom'].location.reload();

top.htm 页面的代码如下：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
   < TITLE > top.htm </ TITLE >
</ HEAD >
< BODY >
< input type =button value ="刷新1" onclick ="window.parent.frames[1].location.reload()" >< br >
< input type =button value ="刷新2" onclick ="window.parent.frames.bottom.location.reload()" >< br >
< input type =button value ="刷新3" onclick ="window.parent.frames['bottom'].location.reload()" >< br >
< input type =button value ="刷新4" onclick ="window.parent.frames.item(1).location.reload()" >< br >
< input type =button value ="刷新5" onclick ="window.parent.frames.item('bottom').location.reload()" >< br >
< input type =button value ="刷新6" onclick ="window.parent.bottom.location.reload()" >< br >
< input type =button value ="刷新7" onclick ="window.parent['bottom'].location.reload()" >< br >
</ BODY >
</ HTML >


效果都是一样的，只是方法稍有不同，下面会介绍各个不同之处的解释
下面是bottom.htm页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。

bottom.htm 页面的代码如下：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
   < TITLE > bottom.htm </ TITLE >
</ HEAD >
< BODY onload ="alert('我被加载了！')" >
< h1 > This is the content in bottom.htm. </ h1 >
</ BODY >
</ HTML >



解释一下：
1.window指代的是当前页面，例如对于此例它指的是top.htm页面。
2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是frame.htm。
3.frames是window对象，是一个数组。代表着该框架内所有子页面。
4.item是方法。返回数组里面的元素。
5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。

附：
Javascript刷新页面的几种方法：
1    history.go(0)
2    location.reload()
3    location=location
4    location.assign(location)
5    document.execCommand('Refresh')
6    window.navigate(location)
7    location.replace(location)
8    document.URL=location.href

 

自动刷新页面的方法:
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.baidu.com">
其中20指隔20秒后跳转到http://www.baidu.com页面

3.页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

ASP.NET/ASP刷新父窗口脚本:
1.   this.response.write("<script>opener.location.reload();</script>");  

2.   this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");   

3.   Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页面.asp'');</script>")

PHP刷新父窗口脚本:
1.   echo "<script>opener.location.reload();</script>";

2.   echo "<script>opener.window.location.href = opener.window.location.href;</script>";   

3.   echo "<script language=javascript>opener.window.navigate(''你要刷新的页面.php'');</script>";


JS刷新框架的脚本语句

//如何刷新包含该框架的页面用   
<script language=JavaScript>
   parent.location.reload();
</script>   

//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
(　或　<a href="javascript:opener.location.reload()">刷新</a>   )

//如何刷新另一个框架的页面用   
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>

如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。

<body οnlοad="opener.location.reload()">开窗时刷新
<body onUnload="opener.location.reload()">关闭时刷新

<script language="javascript">
window.opener.document.location.reload()

CaoMei_Jenny
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript刷新页面的几种方法总结
12-09
该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(...
刷新页面的几种方式
qq_41893413的博客
05-11 9464
reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数：bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新") replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。 语法： location.replace(.
js刷新页面的几种方法
图解前端的博客
05-14 3万+
在前端开发过程中，我们经常需要通过刷新当前的页面来实现某些功能，一起来了解下前端刷新页面有哪些方式呢？ reload刷新法 reload方法，用来强制浏览器刷新当前页面。语法： loaction.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 ...
js刷新页面方法大全
zy408710468的专栏
05-07 1961
1，reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet])    参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2，replace 方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因
JavaScript重新加载与刷新
热门推荐
平凡老者
10-13 4万+
1、window.location.href=“url”： 当前页面打开URL页面，改变url地址，如果URL为空则重新打开当前页面。 （1）与self.location.href="url"，self.location.href="url"相同 （2）this.location.href="url"当前页面打开URL页面 （3）parent.location.href="url"在父
JS脚本刷新页面
eggsound的博客
09-03 1499
网络收集，非原创，如有侵犯，请联系立刻删除。 ** 如何实现刷新当前页面呢？借助js你将无所不能。 1，reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)...
JS刷新当前页面的几种方法总结
10-26
本篇文章主要是对JS刷新当前页面的几种方法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
JS关于刷新页面的相关总结
10-18
在本篇内容中我们给大家整理了关于JS刷新页面的所有相关知识点以及整理了相关的技术文章，大家可以收藏本页面继续深入学习。
刷新当前页面
weixin_41565034的博客
05-07 4839
一、reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参...
JAVA学习笔记_JS实现刷新_重新加载页面
icecoola_的博客
08-23 5831
问题分析：在修改页面信息后，必须手动刷新浏览器才能再次进行信息修改 问题解决： 在修改成功后加入下面JS代码location.reload(); 参考：有的是错误的JS实现重新加载当前页面或者父页面的几种方法 在开发过程中想要在某个时机去刷新某个固定的页面，去更新该页面某些控件的属性，比如显示隐藏、是否可点击等。是用的主要是通过 刷新该页面， 方法如下： 方法一：
刷页面流量小工具
caad3's blog
03-30 603
1. PAGE REBOOT。在线方式，输入要刷的网址，自定义刷新的时间间隔，点击开始按钮即可。2. Yrefresher。IE插件方式，可以在IE工具栏上设置每个页面的刷新情况。
js刷新页面location.reload()用法
stay hungry ! stay foolish!
03-12 1万+
js刷新页面location.reload()用法 转载：https://blog.csdn.net/sinat_17775997/article/details/80263724https://blog.csdn.net/M_Jack/article/details/80749585 在javascript编程中，多使用location.reload实...
js刷新页面的方法
wx13227855087的博客
08-03 3347
1.  reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet])    参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新") reload() 方法用于重新加载当前文档。 如果该方法没有规定参数，或者参数是 fals...
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 654
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 758
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 38
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 904
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
前端Vue2项目搭建过程
xuemen11的博客
04-25 1215
vue2,vuex,vant组件库
[email protected]使用懒加载
weixin_44072254的博客
04-25 214
【代码】[email protected]使用懒加载。
js localstorage 刷新后无法读取
09-30
当刷新页面后，JavaScript的localStorage对象是无法直接读取到之前存储的数据的。这是因为localStorage是一种本地持久化存储的机制，它的数据是保存在浏览器客户端的。 当刷新页面时，浏览器会重新加载页面并重新执行JavaScript代码，这会导致之前存储在localStorage的数据被清除掉。因此，在刷新页面后无法直接读取到localStorage中的数据。 如果我们希望在刷新页面后仍能读取到之前存储的数据，可以通过以下几种方式来实现： 1. 在页面刷新之前，将数据存储在其他地方，比如服务器端或者cookie中。这样刷新后可以通过请求获取数据并重新存储到localStorage中。 2. 使用sessionStorage对象代替localStorage对象进行数据存储。sessionStorage是一种会话级别的存储机制，当页面刷新时，数据仍然可被访问。 3. 在页面加载时，将localStorage中的数据先存储到一个变量中。然后在刷新后检查该变量是否有值，如果有值，则重新将数据存储到localStorage中。 总结来说，localStorage在刷新页面后无法直接读取是因为它的数据是本地持久化存储的，而在刷新时会被清除。但我们可以通过其他方式来实现在刷新后仍能读取到之前存储的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值