说说 JavaScript 中 BOM 的 location 对象

最新推荐文章于 2024-01-25 13:46:34 发布

Deniro Lee

最新推荐文章于 2024-01-25 13:46:34 发布

阅读量719

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/deniro_li/article/details/69948414

版权

JavaScript 专栏收录该内容

91 篇文章 1 订阅

订阅专栏

location 提供了与当前窗口中加载的文档有关的信息以及导航功能。它既是 window 对象的属性，又是 document 对象的属性，即 window.location 与 document.location 引用的是同一个对象。它还能把 URL 解析为独立的片段，下面列出 location 对象的所有属性（省略了 location 前缀）：

属性名	举例	说明
hash	“#contents”	返回 URL 中的 hash；如果没有，则返回空字符串。
host	“xxx.com:8080”	返回服务器 URL 和端口号。
hostname	“xxx.com”	返回不带端口的服务器 URL。
href	“http://xxx.com”	返回当前加载页面的完整 URL。location.toString() 也返回该值。
pathname	“/image/”	返回 URL 中的目录与文件名
port	“8080”	返回 URL 中的端口号。
protocol	“http:”	返回页面使用的协议。
search	“?q=javascript”	返回 URL 中的查询字符串。以问号开头。

1 查询字符串参数

创建一个函数，它可以解析查询字符串，然后返回包含所有参数的一个对象：

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;

}

可以这样使用：

//假设查询字符串：?l=java&num=100
var args = getQueryStringArgs();

console.log(args["l"]);//java
console.log(args["num"]);//100

2 位置操作

使用 assign() 方法，会立即打开新的 URL 并在浏览器的历史记录中生成一条记录：

location.assign("http://xxx.com");

location.href 或 window.location 方法设置一个 URL 值，它们会在内部调用 assign() 方法：

window.location = "http://xxx.com";
location.href = "http://xxx.com";

最常用的是 location.href。

修改 location 对象的其他属性也会改变当前加载的页面：

//假设初始是 http://www.163.com/images/

//变为 http://www.163.com/images/#section1
location.hash = “#section1”;

//变为 http://www.163.com/images/q=javascript
location.search = "?q=javascript";

//变为 http://www.sina.com/images/
location.hostname = "www.sina.com";

//变为  http://www.163.com/mydir/
location.pathname = "mydir";

//变为 http://www.163.com:8080/images/
location.port = 8080;

注意： IE8、Firefox 1、Safari 2+、Opera 9+ 和 Chrome 中，修改 hash 值会生成一条浏览器的历史记录。

每次修改 location 属性，页面都会以新的 URL 重新加载，并生成一条浏览器的历史记录，因此点击“后退”键会导航到前一个页面。可以使用 replace() 方法，它既可以导航到相应的 URL，而且还不会在历史记录中生成新记录：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>You won't be able to get back here（浏览器位置改变）</title>
</head>
<body>
<p>Enjoy this page for a second, because you won't coming back here.</p>
<script type="text/javascript">
    setTimeout(function () {
        location.replace("http://www.163.com");
    }, 1000);
</script>
</body>
</html>

reload() 方法是重新加载当前的页面：

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

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

Deniro Lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
说说 JavaScript 中 BOM 的 location 对象

location 提供了与当前窗口中加载的文档有关的信息以及导航功能。它既是 window 对象的属性，又是 document 对象的属性，即 window.location 与 document.location 引用的是同一个对象。它还能把 URL 解析为独立的片段，下面列出 location 对象的所有属性（省略了 location 前缀）：属性名举例说明 hash “
复制链接

扫一扫