在做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();
( 或 刷新 )
//如何刷新另一个框架的页面用
parent.另一FrameID.location.reload();
如果想关闭窗口时刷新或者想开窗时刷新的话,在
中调用以下语句即可。代码如下
body onload="opener.location.reload()"> 开窗时刷新
关闭时刷新window.opener.document.location.reload()