js刷新页面的方法

本文介绍下,用js刷新当前页面的几种方法,包括reload方法、replace方法、自动刷新方法等。有需要的朋友参考下吧

如何实现刷新当前页面呢?借助js你将无所不能。

1,reload 方法,该方法强迫浏览器刷新当前页面。
语法:location.reload([bForceGet])  
参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
语法: location.replace(URL)  
通常使用: location.reload() 或者是 history.go(0) 来做。
此方法类似客户端点F5刷新页面,所以页面method=”post”时,会出现”网页过期”的提示。
因为Session的安全保护机制。
当调用 location.reload() 方法时, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。
如果有这种应用: 需要重新加载该页面,也就是说期望页面能够在服务端重新被创建,期望是 Not IsPostback 的。
这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。
代码: location.replace(location.href);

返回并刷新页面:

location.replace(document.referrer);
document.referrer //前一个页面的URL

不要用 history.go(-1),或 history.back();来返回并刷新页面,这两种方法不会刷新页面。
附:

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,页面自动刷新:把如下代码加入区域中

复制代码 代码如下:


登录后复制登录后复制

其中20指每隔20秒刷新一次页面.
2,页面自动跳转:把如下代码加入区域中

复制代码 代码如下:


登录后复制登录后复制

其中20指隔20秒后跳转到http://www.jb51.net页面
3,页面自动刷新js版

复制代码 代码如下:

function myrefresh(){   window.location.reload();}setTimeout('myrefresh()',1000); //指定1秒刷新一次

登录后复制

4,JS刷新框架的脚本语句

复制代码 代码如下:

//刷新包含该框架的页面用      parent.location.reload();//子窗口刷新父窗口    self.opener.location.reload();( 或 刷新   )//刷新另一个框架的页面用      parent.另一FrameID.location.reload();

登录后复制

如果想关闭窗口时刷新或想开窗时刷新,在

中调用以下语句即可。

复制代码 代码如下:

 开窗时刷新 关闭时刷新window.opener.document.location.reload()

登录后复制

一、先来看一个简单的例子:

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:

复制代码 代码如下:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    frame       

登录后复制

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

复制代码 代码如下:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    top.html    
 
 
 
 
 
 
  

登录后复制

下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。

复制代码 代码如下:

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    bottom.html    

This is the content in bottom.html.

  

登录后复制

解释一下:

复制代码 代码如下:

1.window指代的是当前页面,例如对于此例它指的是top.html页面。
2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。
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.页面自动刷新:把如下代码加入

区域中

其中20指每隔20秒刷新一次页面.
2.页面自动跳转:把如下代码加入区域中

其中20指隔20秒后跳转到http://www.jb51.net页面
3.页面自动刷新js版

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

三、java在写Servler,Action等程序时,要操作返回页面的话(如谈出了窗口,操作完成以后,关闭当前页面,刷新父页面)

复制代码 代码如下:

1 PrintWriter out = response.getWriter(); 2 out.write(""); 3 ////子窗口刷新父窗口 4 out.write("self.opener.location.reload();"); 5 //关闭窗口 6 out.write("window.opener=null;"); 7 out.write("window.close();"); 8 out.write("");

登录后复制

四、JS刷新框架的脚本语句
1.如何刷新包含该框架的页面用

复制代码 代码如下:

 parent.location.reload(); 

登录后复制

2.子窗口刷新父窗口

复制代码 代码如下:

 self.opener.location.reload(); 

登录后复制

3.如何刷新另一个框架的页面用 (上面的实例以说明了)

复制代码 代码如下:

语句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();

登录后复制

4.如果想关闭窗口时刷新或者想开窗时刷新的话,在

中调用以下语句即可。

 开窗时刷新  关闭时刷新

登录后复制

复制代码 代码如下:

 window.opener.document.location.reload() 

登录后复制

相关推荐:

js刷新页面方法大全

以上就是js刷新页面的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2776719.html

(0)
上一篇 2025年3月8日 14:55:26
下一篇 2025年3月8日 14:55:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js开发数据库的实例分享

    前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。这几个场景用处很多,也非常的成熟好用。但是我还是想要一种能够长久的保存在本地…

    编程技术 2025年3月8日
    200
  • Vue.js条件渲染详解

    本文主要和大家分享vue.js条件渲染详解,在字符串模板中,比如 handlebars,我们得像这样写一个条件块: {{#if ok}}    Yes{{/if}} 登录后复制 在 Vue 中,我们使用 v-if 指令实现同样的功能: Ye…

    编程技术 2025年3月8日
    200
  • 在spring mvc 返回json数据到ajax报错应该如何处理

    这次给大家带来在spring mvc 返回json数据到ajax报错应该如何处理,处理在spring mvc返回json数据到ajax报错的注意事项有哪些,下面就是实战案例,一起来看一下。 最近使用ajax接收spring mvc传过来的j…

    编程技术 2025年3月8日
    200
  • 操作js数组去重的方法

    数组去重算是个老生常谈的问题了,不管是面试还是工作都会有所涉及,去重的方法比较多,不好说谁一定好谁一定差,可根据实际需求进行选择。本文列举一些常见的去重方法,并附上方法优劣与适用场合,如有纰漏请指正。 1. 二重循环对比法: const a…

    2025年3月8日 编程技术
    200
  • 简单理解Vue条件渲染_vue.js

    这篇文章主要帮助大家简单理解vue条件渲染,什么是vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 一、v-if显示单个元素 注意else只能跟在v-if或者v-show后面 nbsp;html>   Vue条件渲染 …

    编程技术 2025年3月8日
    200
  • angularJS实现简易购物车的方法

    本文主要和大家分享angularJS实现简易购物车的方法,希望能帮助到大家。 nbsp;html>        我的购物车     * { margin: 0; padding: 0; } table { border-collap…

    2025年3月8日
    200
  • js引擎的执行机制详解

    本文主要和大家分享js引擎的执行机制详解,希望能帮助到大家。 首先,请牢记 2 点: js 是单线程语言 js 中的 event loop 是 js 的执行机制。深入了解 js 的执行,就等于深入了解 js 里的 event loop js…

    2025年3月8日
    200
  • 初探nodeJS_node.js

    本文主要介绍了nodejs的基础知识。具有很好的参考价值,有需要的朋友可以看一下 一、node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它。 nodeJS是个啥东东? nodeJS,我的理解就是可以运…

    2025年3月8日 编程技术
    200
  • js中数组和字符串的操作方法

    本文主要和大家分享js中数组和字符串的操作方法,主要以文字和代码的形式和大家分享,希望能帮助到大家。 1.数组的操作方法 // 1.数组的操作方法var a = [];a.unshift()/*在数组的开头添加一个或者多个元素,返回新长度;…

    编程技术 2025年3月8日
    200
  • JS中单线程和事件循环详解

    Js 是单线程,js代码从上到下依次执行,比如我们写了两个函数,肯定是上面的函数先执行,下面的函数后执行。但是这种单线程有一个非常大的问题,那就是遇到耗时的任务,后面的任务只能等待它执行完,才能进行。比如ajax 请求,它从服务器上获取数据…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论