location 对象是window对象的一个子对象,通过它可以获取或设置浏览器的当前地址。
location 对象最常见的功能就是改变浏览器当前浏览的页面,例如:
window.location="http://www.google.com";
仅仅通过一个属性赋值,却产生了如同方法调用的效果(浏览器跳转),这个令人觉得不可思议。事实上在内部流程的实现上,它采用了一个方法调用,等价于:
window.location.href="http://www.google.com";
介绍利用location 对象实现的两个主要功能。
1.处理URL
在internet 上,URL用于确定一个网页的地址,它通常包括主机名(如:www.hostname.cn),路径信息(如/blog/),页面名称(如showTopic.aspx),查询字符串(如?sort=book&id=8215),书签信息(如#chapter3)等。在javascript 中有时需要对这些信息进行处理,尽管可以自己分析window.location的完整返回值,但location对象提供了一些属性可以更方便地处理这些信息。
location 对象的属性
属性 示例 描述
protocol http: 表示浏览器和服务器间通信所使用的协议
hostname www.x2blog.cn 表示服务器的主机地址,通常是一个域名或IP地址
port 80 表示浏览器和服务器间通信所使用的服务器端口(默认
80,也是WEB服务器常用的端口)
host www.x2blog.cn:80 表示主机名加端口号,等价于:hostname+port
pathname /ajax/3.2html 文档的路径信息
hash #chapter1 表示书签名,即从#开始到书签结束的部分
search ?sort=book&id=8215 表示查询字符串,即从问号(?)开始到查询参数结束部分
href http://www.x2blog.cn:80/ajax/3.3.html?sort=book&id=23#chapter1 表示整个URL地址
2 .控制浏览器
location 对象提供了两个方法用来对页面载入进行控制,分别是reload 方法和replace方法。
(1)reload(source)方法
顾名思义,reload方法就是重新载入页面,它接受一个布尔类型的参数source,表示页面载入的来源。当source为默认值false时,表示从缓存中载入页面;当source为true 时表示强制从服务器重新载入页面。通过这个方法,可以很容易实现页面刷新功能。
(2)replace(URL)方法
使用浏览器访问网站时,浏览器能够将访问过的页面记录下来,称访问历史。单击“后退”或“前进”按钮时,能够将用户导航到上一页面或下一页面。replace方法用来控制新记录插入浏览器访问历史列表中的方式。
语法:location.replace(URL);
这个调用实际上和改变location属性的效果相同,表示将用户导航至URL所指向的页面。然而,当前页面却不会被记录到浏览器历史列表中,而是由新页面代替。
例如:3个页面都具有3个链接,分别指向page1.html,page2.html,page3.html. 前面两个链接是普通的文本链接。如:
<a href="page1.html">page1</a>
<a href="page2.html">page2</a>
<a href="javascript:void(0)" onclick="location.replace('page3.html')">page3</a>
//javascript:void(0)表示空函数调用,在这里只是起到完善链接标记(a)的功能,因为每个链接标记(a)都必须有一个href属性。
当用户依次单击这三个链接时,浏览器的历史记录将仅会保留page1.html 和 page3.html 两个记录。在到达第三个页面时单击“后退”按钮,浏览器将会导航至page1.html页面而不是page2.html页面。
这个功能在一些需要较高安全性的网站中很有用。例如出于某种目的,不相让用户单击“后退”来返回到上一页面,就可以通过这个方法来实现。最常见的就是防止用户重复提交同一个表单。
location 对象最常见的功能就是改变浏览器当前浏览的页面,例如:
window.location="http://www.google.com";
仅仅通过一个属性赋值,却产生了如同方法调用的效果(浏览器跳转),这个令人觉得不可思议。事实上在内部流程的实现上,它采用了一个方法调用,等价于:
window.location.href="http://www.google.com";
介绍利用location 对象实现的两个主要功能。
1.处理URL
在internet 上,URL用于确定一个网页的地址,它通常包括主机名(如:www.hostname.cn),路径信息(如/blog/),页面名称(如showTopic.aspx),查询字符串(如?sort=book&id=8215),书签信息(如#chapter3)等。在javascript 中有时需要对这些信息进行处理,尽管可以自己分析window.location的完整返回值,但location对象提供了一些属性可以更方便地处理这些信息。
location 对象的属性
属性 示例 描述
protocol http: 表示浏览器和服务器间通信所使用的协议
hostname www.x2blog.cn 表示服务器的主机地址,通常是一个域名或IP地址
port 80 表示浏览器和服务器间通信所使用的服务器端口(默认
80,也是WEB服务器常用的端口)
host www.x2blog.cn:80 表示主机名加端口号,等价于:hostname+port
pathname /ajax/3.2html 文档的路径信息
hash #chapter1 表示书签名,即从#开始到书签结束的部分
search ?sort=book&id=8215 表示查询字符串,即从问号(?)开始到查询参数结束部分
href http://www.x2blog.cn:80/ajax/3.3.html?sort=book&id=23#chapter1 表示整个URL地址
2 .控制浏览器
location 对象提供了两个方法用来对页面载入进行控制,分别是reload 方法和replace方法。
(1)reload(source)方法
顾名思义,reload方法就是重新载入页面,它接受一个布尔类型的参数source,表示页面载入的来源。当source为默认值false时,表示从缓存中载入页面;当source为true 时表示强制从服务器重新载入页面。通过这个方法,可以很容易实现页面刷新功能。
(2)replace(URL)方法
使用浏览器访问网站时,浏览器能够将访问过的页面记录下来,称访问历史。单击“后退”或“前进”按钮时,能够将用户导航到上一页面或下一页面。replace方法用来控制新记录插入浏览器访问历史列表中的方式。
语法:location.replace(URL);
这个调用实际上和改变location属性的效果相同,表示将用户导航至URL所指向的页面。然而,当前页面却不会被记录到浏览器历史列表中,而是由新页面代替。
例如:3个页面都具有3个链接,分别指向page1.html,page2.html,page3.html. 前面两个链接是普通的文本链接。如:
<a href="page1.html">page1</a>
<a href="page2.html">page2</a>
<a href="javascript:void(0)" onclick="location.replace('page3.html')">page3</a>
//javascript:void(0)表示空函数调用,在这里只是起到完善链接标记(a)的功能,因为每个链接标记(a)都必须有一个href属性。
当用户依次单击这三个链接时,浏览器的历史记录将仅会保留page1.html 和 page3.html 两个记录。在到达第三个页面时单击“后退”按钮,浏览器将会导航至page1.html页面而不是page2.html页面。
这个功能在一些需要较高安全性的网站中很有用。例如出于某种目的,不相让用户单击“后退”来返回到上一页面,就可以通过这个方法来实现。最常见的就是防止用户重复提交同一个表单。