JavaScript BOM操作使用location对象 → 查询字符串参数/位置操作

最新推荐文章于 2021-05-17 22:09:22 发布

yingjieweb

最新推荐文章于 2021-05-17 22:09:22 发布

阅读量371

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Marker__/article/details/103137005

版权

JavaScript 专栏收录该内容

34 篇文章 3 订阅

订阅专栏

localtion 对象存储当前页面与位置（URL）相关信息，表示当前显示文档的 Web 地址。使用 window 对象的 location 属性可以访问。事实上，localtion 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location 和 document.localtion 引用的是同一个对象。

但是 window.location 和 document.localtion 不同，前者引用 location 对象，后者只是一个只读字符串，与 document.URL 同义。而且当服务器重定向时，document.location 包含的是已经装载的 URL，而 location.href 包含的则是原始请求的文档 URL。

localtion 对象定义了 8 个属性，其中 7 个属性分别指向当前 URL 的各部分信息，另一个属性（href）包含了完整的 URL 信息，为了更直观的理解，参照下面 URL 具体说一下 location 对象的各个属性。

http://www.mysite.cn:80/news/index.html?id=123&name=location#top

location对象属性
属性	说明
Href	声明当前显示文档的完成URL，与其他location属性只声明部分URL不同，把该属性设置为新的URL会使浏览器读取并显示新URL内容
Protocol	声明了URL的协议部分，包括后缀的冒号。例如："http:"
Host	声明了当前URL中的主机名和端口部分。例如："www.mysite.cn:80"
Hostname	声明了当前URL中的主机名。例如："www.mysite.cn"
Port	声明了当前URL中的端口部分。例如："80"
Pathname	声明了当前URL中的路径部分。例如："news/index.html"
Search	声明了当前URL中的查询部分，包括前导问号。例如："?id=123&name=location"
Hash	声明了当前URL中的锚部分，包括前导符（#）。例如："#top"，指定在文档中锚记的名称

使用 location 对象，结合字符串方法可以抽取 URL 中查询字符串的参数值。

1、查询字符串参数

下面例子定义一个获取 URL 查询字符串参数值的通用函数，该函数能够抽取每个参数和参数值，并以 名/值对 的形式存储在对象中返回。

var queryString = fucntion(){    //获取URL查询字符串参数值的通用函数
    var q = location.search.substring(1);    //获取字符串，即"id=123&name=location"部分
    var a = q.split("&");    //以&为界把查询字符串劈开为数组
    var obj = {};    //定义一个临时对象
    for(var i=0;i<a.length;i++){    //遍历数组
        var n = a[i].indexOf("=");    //获取每个参数中等号的位置
        if(n != -1)
            continue;    //如果没有发现则跳到下一次循环继续操作
        var name = a[i].substring(0,n);    //截取等号前的参数名称
        var value = a[i].substring(n+1);    //截取等号后的参数值
        obj[name] = value;    //以名/值对的形式存储在对象中
    }
    return obj;    //返回对象
}

然后在页面中调用该函数，即可获取URL中的查询字符串信息，并以对象形式读取它们的值。

var obj = quertyString();    //调用查询字符串函数
for(var i in obj){           //遍历参数对象，返回每个参数及其值
    alert(i + "=" + obj[i]);
}

如果当前页面的 URL 中没有查询字符串信息，用户可以在浏览器的地址栏中补加完整的查询字符串，如："?id=123&name=location"，再次刷新页面，即可显示查询的查询字符串信息。

2、位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置。首先，也是最常用的方式，就是使用 assign() 方法并为其传递一个URL，如下所示。

location.assign("http://www.baidu.com");

这样，就可以立即打开新 URL 并在浏览器的历史记录中生成一条记录。如果是将 location.href 或 window.location 设置为一个 URL 值，也会以该值调用 assign() 方法。例如，下列两行代码与显式调用 assign() 方法的效果完全一样。

window.location="http://www.baidu.com";
location.href="http://www.baidu.com";

在这些改变浏览器位置的方法中，最常用的是设置 location.href 属性。另外，修改 location 对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将 hash、search、hostname、pathname 和 port 属性设置为新值来改变URL。

//假设初始URL为http://www.wrox.com/WileyCDA/
//将URL修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash="#section1";
//将URL修改为"http://www.wrox.com/wileyCDA/？g=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 重新加载。

2.1 replace() 方法

当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击 "后退" 按钮都会导航到前一个页面。要禁用这种后退行为，可以使用 replace() 方法。这个方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace() 方法之后，用户不能回到前一个页面，来看下面的例子：

<! DOCTYPE html>
<htm1><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.baidu.com/");
    },1000);
</script>
</body></htm1>

如果将这个页面加载到浏览器中，浏览器就会在1秒钟后重新定向到 www.baidu.com。然后，“后退” 按钮将处于禁用状态，如果不重新输入完整的 URL，则无法返回示例页面。

2.1 reload() 方法

与位置有关的最后一个方法是 reload() ，作用是重新加载当前显示的页面。如果调用 reload() 时不传递任何参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要像下面这样为该方法传递参数 true。

location.reload();    //重新加载（有可能从缓存中加载）
location.reload(true);//重新加载（从服务器重新加载）

位于 reload() 调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最好将 reload() 放在代码的最后一行。

yingjieweb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM操作使用location对象 → 查询字符串参数/位置操作

localtion 对象存储当前页面与位置（URL）相关信息，表示当前显示文档的 Web 地址。使用 window 对象的 location 属性可以访问。事实上，localtion对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location 和 document.localtion引用的是同一个对象。但是wi...
复制链接

扫一扫