最有用的BOM对象之一——location对象
来源:互联网 发布:php提示错误信息代码 编辑:程序博客网 时间:2024/05/18 03:04
location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。location对象既是window对象的属性,也是document对象的属性(即window.location和document.location引用的是同一个对象)。
location对象的用处不只表现在它保存着当前文档的信息,还表现在它将URL解析为独立的片段,让开发人员可以通过不同的属性访问这些片段。
查询字符串参数
尽管location.search返回从问号到URL末尾的所有内容,但却没有办法逐个访问其中的每个查询字符串参数。但可以创建一个函数,用以解析查询字符串,然后返回包含所有参数的一个对象:
function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length >0 ?location.search.substring(1) : ""), //保存数据的时候 args={}; //取得看每一项 items = qs.length ? qs.split("&"):[], item = null, name = null, value = null, //在for循环中使用 i = 0, len = items.length; //逐个将每一项添加到args 对象中 for(i=0;i<len;i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if(name.length){ args[name] = value; } } return args;}
函数思路:
1.先去掉查询字符串开头的问号。(location.search中必须要包含一或多个字符);
2.所有参数将被保存在args对象中,该对象一字面量形式创建;
3.根据“&”来分割查询字符串,并返回 name=value 格式的字符串数组;
4.for循环迭代这个数组,然后再根据“=”分割每一项,从而返回第一项为参数名。第二项为参数值的数组;
5.使用decodeURIComponent()
分别解码name和value(因为查询字符串应该是被编码过的);
6.将name作为args对象的属性,将value作为相应属性的值。
示例:
//假设查询字符串是?q=javascript&num=10
var args =getQueryStringArgs();
alert(args[“q”]); //”javascript”
alert(args[“num”]); //”10”
位置操作
使用location对象可以通过很多方式来改变浏览器的位置。
location.assign("http://www.wrox.com");
这样就可以立即打开新的URL并在浏览器的历史记录中生成一条记录。如果将location.href或windown.location设置为一个URL值,也会以该值调assign()
方法。例如,下列两行代码与显示调用assign()
方法的效果完全一样:
window.location = "http://www.wrox.com";location.href = "http://www.wrox.com";
在这些改变浏览器位置的方法中,最常用的是设置location.href属性。另外修改location对象的其他属性也可以改变当前加载的页面。
//假设初始化URL为http://www.wrox.com/WileyCDA//将URL修改为"http://www.wrox.com/WileyCDA/#sectionl"location.hash = "#sectionl";//将URL修改为"http://www.wrox.com/WileyCDA/?q=javascript"location.search= "?q=javascript";//将URL修改为"http://www.yahoo.com/WileyCDA/"location.hostname= "www.yahoo.com;//将URL修改为"http://www.yahoo.com/mydir/"location.pathname= "mydir;//将URL修改为"http://www.yahoo.com:8080/WileyCDA/"location.port= 8080;
注意:每次修改location的属性(hash除外),页面都会以新的URL重新加载。
当通过上述任何一种方式修改URL之后,浏览器的历史记录中就会生成一条新纪录,因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为,可以使用replace()
方法。这个方法只接受一个参数,即要导航到的URL;结果虽然会导致浏览器位置的改变,但不会在历史记录中生成新记录。在调用replace()
方法之后,用户不能回到前一个页面,如下例子:
<!DOCTYPE html><html><head> <title>You won`t be able to get back here</title></head><body> <p>Enjoy this page for a second,because you won`t be coming back here.</p> <script type"text/javascript"> setTimeout(function(){ location.replace("http://www.wrox.com/"); },1000); </script></body></html>
如果将这个页面加载到浏览器中,浏览器就会在1秒钟后重新定向到www.wrox.com。然后,“后退”按钮将处于禁用状态,如果不重新输入完整的的URL,则无法返回示例页面。
与位置有关的最后一个方法是reload()
,作用是重新加载当前显示的页面。如果调用reload()
时不传递任何参数,页面就会以最有效的方式重新加载(如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载)。如果要强制从服务器重新加载,则需要像下面这样为该方法传递参数true。
location.reload(); //重新加载(有可能从缓存中加载)location.reload(true) //重新加载(从服务器重新加载)
位于reload()
调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素。为此,最好将reload()
放在代码的最后一行。
- 最有用的BOM对象之一——location对象
- BOM对象之Location
- BOM之location对象
- BOM中location对象
- BOM对象之location对象
- 说说 JavaScript 中 BOM 的 location 对象
- JS BOM之location对象
- 17.BOM&DOM-Location对象
- 【JavaScript学习】BOM:location对象
- 浏览器对象模型BOM之location对象
- JavaScript学习5:BOM之location对象
- JavaScript高级编程【BOM-location对象】
- javascript之BOM地址栏对象(Location)
- javaScript中的BOM对象-Location(2)
- JavaScript之Location对象(BOM)
- JavaScript基础(BOM)-Window 对象、History 对象、Location 对象
- BOM—浏览器对象模型
- BOM—浏览器对象模型
- 第一个Appium(java)例子
- 最近一直用Myeclipse2014写东西,今天打开突然闪退,电脑重启无效果
- 判断单链表中是否有环,找到环的入口节点
- STM32看门狗
- java设计模式之原型模式
- 最有用的BOM对象之一——location对象
- Python:使用psycopg2模块操作PostgreSQL
- 二进制文件的I/O
- 洛谷11月月赛 T2 不开心的金明
- java数组实题
- STL之拷贝和替换算法
- 从倒数第一到全国第二 安徽省专利电子申请率7年增8.4倍
- 原生 JS 懒加载简单实现
- 怎么修改eclipse及jsp的编码