前端开发

 首页 > 前端开发 > javascript > JavaScript刷新页面特效代码

JavaScript刷新页面特效代码

分享到:
【字体:
导读:
          在js中刷新页面有很多方法,如比较常用的有reload(),loaction,location.href这些都可以达到页面刷新效果,下面我们一起来看看这些方法用法。...

在做web开发的时候有时候,一般都会用到。方法不止一种,看看你掌握了几种?

刷新页面常用方法

history.go(0)     

location.reload()     

location=location     

location.assign(location)     

document.execCommand('Refresh')     

window.navigate(location)     

location.replace(location)     

document.URL=location.href

今天在项目中发现在chrome下刷新页面既然无效了,经过反复测试发现是“#”字符阻止页面刷新

不理解?先来看下demo

 代码如下

//javascript
$(function(){
 $('#reload').show('slow');
 $('#o1').click(function(){
  location = location
 })
 $('#o2').click(function(){
  history.go(0)
 })
 $('#o3').click(function(){
  location.reload()
 })
 $('#o4').click(function(){
  location = location
 })
 $('#o5').click(function(){
  history.go(0)
 })
 $('#o6').click(function(){
  location.reload()
 })
 $('#o7').click(function(){
  window.location = window.location
  return false
 })
 $('#o8').click(function(){
  history.go(0)
  return false
 })
 $('#o9').click(function(){
  location.reload()
  return false
 })
})
//html
页面刷新了
示例1 示例2 示例3 示例4 示例5 示例6 示例7 示例8 示例9

测试结果

•firefox 所有示例刷新正常

•chrome 示例2刷新无效

•opera 所有示例刷新正常

•IE 所有示例刷新正常,示例2会在地址栏增加“#”字符

这一次在地址栏增加“#”字符,再一次测试结果如下:

•firefox 示例1、示例4、示例7刷新无效,其余刷新正常

•chrome 示例3、示例6、示例9刷新正常,其余刷新无效

•opera 示例1、示例4、示例7刷新无效,其余刷新正常

•IE 示例1、示例4、示例7刷新无效,其余刷新正常

看来这一次是chrome耍个性了,在这里设计蜂巢提醒大家注意以下两点:

1.尽量少用“#”来作为空链接,使用javascript:;等来代替。

2.只在适当的时候使用location.reload()刷新页面。因为该方法会强制清除缓存,增加页面加载的时间。


自动刷新页面的方法:

1.页面自动刷新:把如下代码加入区域中

 代码如下

meta http-equiv="refresh" content="20">

其中20指每隔20秒刷新一次页面.

2.页面自动跳转:把如下代码加入区域中

 代码如下

meta http-equiv="refresh" content="20;url=http://www.111cn.net">

其中20指隔20秒后跳转到http://www.111cn.net页面

3.页面自动刷新js版

 代码如下

script language="JavaScript">

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用

 代码如下

script language=JavaScript>

parent.location.reload();

//子窗口刷新父窗口

 代码如下

script language=JavaScript>

self.opener.location.reload();

( 或 刷新 )

//如何刷新另一个框架的页面用 

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

 代码如下

body onload="opener.location.reload()"> 开窗时刷新

关闭时刷新


分享到:
微信常用方法【连载】
隐藏微信中网页右上角按钮 function onBridgeReady(){  WeixinJSBridge.call('hideOptionMenu'); } if (typeof WeixinJSBridge == "undefined"){     if( document.addEventListener ){         document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); ...
Javascript设置、读取、删除cookie函数设...
Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能。 Cookie的Domain和Path属性标识了这个Cookie是哪一个网站发送给浏览器的;Cookie的Expires属性标识了Cookie的有效时间,当Cookie的有效时间过了之后,这些数据就被自动删除了。 如 果不设置过期时...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……