网站地图    收藏    合作   

主页 > 前端 > javascript >

JavaScript刷新页面特效代码

来源:自学PHP网    时间:2016-07-08 16:16 作者: 阅读:

[导读] 在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
<div id="reload">页面刷新了</div>
<a href="#" id="o1">示例1</a>
<a href="#" id="o2">示例2</a>
<a href="#" id="o3">示例3</a>
<a href="javascript:;" id="o4">示例4</a>
<a href="javascript:;" id="o5">示例5</a>
<a href="javascript:;" id="o6">示例6</a>
<a href="#" id="o7">示例7</a>
<a href="#" id="o8">示例8</a>
<a href="#" id="o9">示例9</a>

测试结果

&bull;firefox 所有示例刷新正常

&bull;chrome 示例2刷新无效

&bull;opera 所有示例刷新正常

&bull;IE 所有示例刷新正常,示例2会在地址栏增加&ldquo;#&rdquo;字符

这一次在地址栏增加&ldquo;#&rdquo;字符,再一次测试结果如下:

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

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

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

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

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

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

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


自动刷新页面的方法:

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

 代码如下

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

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

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

 代码如下

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秒刷新一次

</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 onload="opener.location.reload()"> 开窗时刷新

<body onUnload="opener.location.reload()"> 关闭时刷新

<script language="javascript">

window.opener.document.location.reload()

</script>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论