js刷新页面无效的解决方案

js刷新页面主要有以下三种方法:

location = location
history.go(0)
location.reload()
//在前面加不加window效果都一样

今天在项目中发现在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()刷新页面。因为该方法会强制清除缓存,增加页面加载的时间。

“js刷新页面无效的解决方案”的3个回复

    1. 在有#号的页面
      chrome 示例3、示例6、示例9刷新正常,其余刷新无效
      我的意思和你的是一样的吧 ➡

发表评论

电子邮件地址不会被公开。 必填项已用*标注