《JavaScript高级程序设计》读书笔记 -12.2 location 对象

最新推荐文章于 2024-05-27 09:27:53 发布

何乐乐和何了了

最新推荐文章于 2024-05-27 09:27:53 发布

阅读量194

点赞数 1

文章标签： javascript js 前端

本文链接：https://blog.csdn.net/MustImproved/article/details/119247934

版权

12.2 location对象

- - 12.2 location对象

12.2 location对象

location是最有用的BOM对象之一，提供了当前矿口中加载文档的信息，以及通常的导航功能。这个对象独特的地方在于，它既是window的属性，也是document的属性。location 对象不仅保存着当前加载文档的信息，也保存着把URL 解析为离散片段后能够通过属性访问的信息。

假设浏览器当前加载的URL 是http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents，location 对象的内容如下表所示。
请添加图片描述

12.2.1 查询字符串

location.search 返回了从问号开始直到URL 末尾的所有内容，但没有办法逐个访问每个查询参数。下面的函数解析了查询字符串，并返回一个以每个查询参数为属性的对象：

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script>
            let getQueryStringArgs = function () {
                //取得没有开头问好的查询字符串
                let qs = (location.search.length > 0 ? location.search.substring(1) : "") 
                //保存数据的对象
                args = {}

                //把每个参数添加到args对象
                for (let item of qs.split('&').map(kv => kv.split('='))) {
                    let name = decodeURIComponent(item[0]),
                        value = decodeURIComponent(item[1]) //value是字符串
                    if (name.length) {
                        args[ name ] = value
                    }
                }
                return args
            }

            console.log(getQueryStringArgs())
        </script>
    </body>
</html>

// 假设查询字符串为?q=javascript&num=10

那么输出结果是

{q: "javascript", num: "10"}

URLSearchParams

URLSearchParams 提供了一组标准API 方法，通过它们可以检查和修改查询字符串

let qs = "?q=javascript&num=10";
let searchParams = new URLSearchParams(qs);
alert(searchParams.toString()); // " q=javascript&num=10"
searchParams.has("num"); // true
searchParams.get("num"); // 10
searchParams.set("page", "3");
alert(searchParams.toString()); // " q=javascript&num=10&page=3"
searchParams.delete("q");
alert(searchParams.toString()); // " num=10&page=3"

大多数支持URLSearchParams 的浏览器也支持将URLSearchParams 的实例用作可迭代对象：

let qs = "?q=javascript&num=10";
let searchParams = new URLSearchParams(qs);
for (let param of searchParams) {
console.log(param);
}
// ["q", "javascript"]
// ["num", "10"]

12.2.2 操作地址

可以通过修改location 对象修改浏览器的地址。最常见的是使用assign()方法并传入一个URL，如下所示：

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

这行代码会立即启动导航到新URL 的操作，同时在浏览器历史记录中增加一条记录。如果给location.href 或window.location 设置一个URL，也会以同一个URL 值调用assign()方法。比如，下面两行代码都会执行与显式调用assign()一样的操作：

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

在这3 种修改浏览器地址的方法中，设置location.href 是最常见的。

// 假设当前URL 为http://www.wrox.com/WileyCDA/
// 把URL 修改为http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";

// 把URL 修改为http://www.wrox.com/WileyCDA/?q=javascript
location.search = "?q=javascript";

// 把URL 修改为http://www.somewhere.com/WileyCDA/
location.hostname = "www.somewhere.com";

// 把URL 修改为http://www.somewhere.com/mydir/
location.pathname = "mydir";

// 把URL 修改为http://www.somewhere.com:8080/WileyCDA/
location.port = 8080;

除了hash 之外，只要修改location 的一个属性，就会导致页面重新加载新URL。

在以前面提到的方式修改URL 之后，浏览器历史记录中就会增加相应的记录。当用户单击“后退”按钮时，就会导航到前一个页面。如果不希望增加历史记录，可以使用replace()方法。

最后一个修改地址的方法是reload()，它能重新加载当前显示的页面。调用reload()而不传参数，页面会以最有效的方式重新加载。也就是说，如果页面自上次请求以来没有修改过，浏览器可能会从缓存中加载页面。如果想强制从服务器重新加载，可以像下面这样给reload()传个true：

location.reload(); // 重新加载，可能是从缓存加载
location.reload(true); // 重新加载，从服务器加载

何乐乐和何了了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript高级程序设计》读书笔记 -12.2 location 对象

12.2 location对象location是最有用的BOM对象之一，提供了当前矿口中加载文档的信息，以及通常的导航功能。这个对象独特的地方在于，它既是window的属性，也是document的属性。location 对象不仅保存着当前加载文档的信息，也保存着把URL 解析为离散片段后能够通过属性访问的信息。假设浏览器当前加载的URL 是http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q=javascript#contents，location
复制链接

扫一扫