`
mamaoyuan625
  • 浏览: 176997 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript中reload和replace的区别

阅读更多

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

replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。
语法: location.replace(URL) 参数: URL

在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面,所以页面的method="post"的时候,会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到:当调用 location.reload() 方法的时候, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。如果有这种应用: 我们需要重新加载该页面,也就是说我们期望页面能够在服务端重新被创建,我们期望是 Not IsPostback 的。这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写: location.replace(location.href)

扩展:

 

window.location.href

window.top.location.replace("http://www.im286.com")

top.location.href("http://www.im286.com")

window.navigate ("http://www.im286.com")

Html:

<meta http-equiv="Refresh" content="0; url=http://xxx.com/" >

---------------------------------------

URL即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等

host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号
整数,可选,省略时使用方案的默认端口,如http的默认端口为80。

path:路径
由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。

query:查询
可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。

fragment:信息片断
字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL

http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere


我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)
本例返回值: http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

2,window.location.protocol
URL 的协议部分
本例返回值:http:

3,window.location.host
URL 的主机部分
本例返回值:www.x2y2.com

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:""

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/fisker/post/0703/window.location.html

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

7,window.location.hash
锚点
本例返回值:#imhere

 

 

 

本文来自CSDN博客http://blog.csdn.net/wangfang_0728/archive/2009/02/18/3905419.aspx

 

先来看一个简单的例子:
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>
现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。
语句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();
top.html 页面的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> top.html </TITLE>
</HEAD>
<BODY>
<input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>
<input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>
<input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>
<input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>
<input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>
<input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>
<input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>
</BODY>
</HTML>
下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。
bottom.html 页面的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> bottom.html </TITLE>
</HEAD>
<BODY onload="alert('我被加载了!')">
<h1>This is the content in bottom.html.</h1>
</BODY>
</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.页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">
其中20指隔20秒后跳转到http://www.wyxg.com页面
3.页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
ASP.NET如何输出刷新父窗口脚本语句
1. this.response.write("<script>opener.location.reload();</script>");
2. this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");
3. Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</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>

本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/14397.htm

分享到:
评论

相关推荐

    js 页面刷新location.reload和location.replace的区别小结.docx

    JavaScript 中的 location.reload 和 location.replace 方法的区别 在 JavaScript 中,我们经常使用 location.reload() 和 location.replace() 两个方法来刷新页面或重定向到新的 URL。但是,这两个方法之间有着...

    js 页面刷新location.reload和location.replace的区别小结

    标题中提到的“js页面刷新location.reload和location.replace的区别小结”,涉及的是JavaScript中页面刷新操作的两种不同方法:location.reload和location.replace。这两种方法都可以实现页面的刷新功能,但具体的...

    js location.replace与location.reload的区别

    总结来说,location.replace()和location.reload()在页面的导航和刷新过程中扮演着不同的角色,开发者应根据具体需求选择合适的方法来确保程序的正确执行和用户体验的流畅性。在使用时,要特别注意浏览器的历史记录...

    js刷新页面location.reload()用法详解

    在实际开发中,合理运用`reload()`和`replace()`可以帮助我们更好地控制页面加载的行为。希望以上的介绍对你的学习或工作有所帮助,如果你需要进一步探索JavaScript的其他功能,可以继续深入学习相关文档和教程。

    node-serve-reload-replace:具有内置实时重载,服务器发送事件,服务器端包含等功能的简单http服务器!

    SRR:服务重新加载替换 ... 特征 ...重新加载:自动监视文件...$ npm install --global serve-reload-replace 用法 $ srr --help Usage: srr [options] --root Path to serve & watch default: $PWD --client Path to cu

    JavaScript 中 doucment 的常用方法

    在深入探讨JavaScript中`document`对象的常用...以上就是JavaScript中`document`对象的常用方法和属性的概述,掌握这些内容对于前端开发者来说至关重要,能够帮助我们在Web页面上实现丰富的交互效果和动态内容更新。

    javascript学习总结.doc

    location对象则包含如protocol、hostname、port、pathname、search、hash等属性,以及reload和replace方法,用于刷新页面或替换URL。 在JavaScript中,变量命名规则、表达式和运算符与Java类似,但数据类型略有不同...

    javascript页面跳转常用代码.pdf

    JavaScript是Web开发中不可或缺的一部分,尤其在处理页面跳转和刷新方面起着关键作用。本文将详细介绍JavaScript中用于页面跳转和刷新的各种方法,并提供实际的代码示例。 首先,让我们来看看JavaScript刷新页面的...

    javascript 页面刷新和模态对话框 学习总结 推荐哦

    ### JavaScript 页面刷新方法详解 #### 一、JavaScript刷新页面的各种方式 在JavaScript中,有多种方式可以用来刷新页面。...通过以上介绍,希望能帮助读者更好地理解和掌握这些技术,并在实际项目中灵活运用。

    javascript 的Document属性和方法集合

    - `document.location.reload()`, `document.location.reload(URL)`, `document.location.assign(URL)`, `document.location.replace(URL)`: 分别用于刷新页面、加载新页面和替换当前页面。 5. **selection对象** ...

    javascript 常用的属性与方法

    `reload()`方法用于刷新页面,`assign()`和`replace()`方法则用于加载新的URL。 9. **selection对象**:`document.selection`在旧版的IE浏览器中用于处理文本选择。在现代浏览器中,通常使用`window.getSelection()...

    Javascript刷新页面的几种方法

    ### JavaScript刷新页面的方法 在Web开发中,有时候我们需要利用JavaScript来实现页面的自动刷新或跳转功能。本文将详细介绍几种常见的使用JavaScript刷新页面的...在实际应用中,还需要注意兼容性和用户体验的问题。

    JavaScript知识点.docx

    `location`对象的属性如`host`、`hostname`和`href`可获取URL信息,而`reload()`、`replace()`方法则用于页面的刷新和跳转。`history`对象提供了`forward()`、`back()`和`go()`方法,用于前进、后退和定位到特定的...

    JavaScript小技巧整理篇(非常全).pdf

    在JavaScript中,`==` 和 `===` 都用于比较两个值是否相等。但是,它们之间有一个重要的区别: - `==` 只比较值本身,如果两边的类型不同,则会先进行类型转换后再比较。 - `===` 同时比较值和类型。如果两边的类型...

    javascript 打开页面window.location和window.open的区别.docx

    在JavaScript中,`window.location` 和 `window.open` 都是用来控制浏览器导航的重要API,但它们在使用场景、功能特性和行为上有显著的不同。了解这些差异对于合理地利用这两种方法至关重要。 #### 二、window....

    Javascript试题

    `location.replace()`用于替换当前文档,而`location.reload()`用于重新加载当前文档。题目中正确答案应该是`location.href = "http://www.baidu.com";`或者`window.location = "http://www.baidu.com";`,但选项中...

    Javascript函数大全.pdf

    `location.reload`用于刷新页面,`location.assign`和`location.replace`则用于加载新的URL,其中`assign`会添加到历史记录,而`replace`则替换当前记录。 4. `selection`对象:在早期的浏览器中,`document....

    JavaScript BOM.pdf

    JavaScript BOM(Browser Object Model)是JavaScript中的一种对象模型,它提供了访问和操作浏览器窗口、文档和其他浏览器对象的方法。BOM主要包括Window、Document、Location、History、Navigator和Screen等对象。 ...

Global site tag (gtag.js) - Google Analytics