《JS高程（3）》BOM-02(location)-第8章笔记(07)

location对象

1. 
   
2. URL（统一资源定位符）
   组成：协议，服务器名称，路径，文件名和查询。
   完整的、带有授权部分的普通统一资源标志符语法：
   

协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志。

‘#’后跟位置标识符；
‘?’连接作用/清除缓存；
‘&’ 不同参数的间隔符；
‘?’到‘#’之间为参数部分多个参数之间用‘&’做分隔符。

URL:https://offer.1688.com/offer/post/post_navigation.htm?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575

protocol协议:	‘https’
host域名:	‘offer.1688.com’
pathname目录:	‘offer/post’;
文件名.文件后缀:	‘post_navigation.htm’；
search查询字符串:	‘?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575’

---

2.location 基础知识

location：BOM对象中的一员；
location：window对象的属性；
location：document对象的属性。

window.location 与document.location 引用的是同一个对象。
用处：
提供当前窗口中加载的文档有关的信息；
部分导航功能；
将URL解析问独立的片段；

查询字符串参数

解析查询字符串，返回包含所有参数的一个对象。

URL:https://offer.1688.com/offer/post/post_navigation.htm?tracelog=qianniu_rukou_gycp&user_number_id=1934257575&user_id=1934257575

(function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    //判断search是否存在，若存在从第二位开始取
    var qs = (location.search.length > 0 ? location.search.substring(1): ""),
    // 保存数据的对象
    args={},
    //取得每一项
    //判断qs是否存在，若存在以'&'分隔字符
    items = qs.length ? qs.split("&"):[],
    item = null, name = null, value = null,

    i = 0 , len = item.length;
    ///逐个将每一项添加到args对象中
    for(i = 0; i < len ; i++){
        //取items各个项，并用'='分隔
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value =  decodeURIComponent(item[1]);

        if (name.length){
            args[name] = value;
        }
    }
    // args 返回3组值
    console.log(args)
    //Object {tracelog: "qianniu_rukou_gycp", user_number_id: "1934257575", user_id: "1934257575"}
    return args;
})()

每个查询字符串参数都成了返回对象的属性，这样就极大的方便了每个参数的访问。

---

位置操作

使用location 对象改变浏览器的位置。
1. 使用assign()方法并为其传递一个URL

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

//效果与assign相同
window.location = "http://www.wrox.com"
//最常用
location.href= "http://www.wrox.com"                                                                                                                        

通过对location的其他属性也可以修改URL：hash、search、hostname、pathname、port。修改后的URL均会生成一条新的浏览记录，因此可以通过“后退”按钮都会导航到前面一个页面。

replace(newURL)：重置浏览器位置，不会在 History 对象中生成一个新的记录,newURL 将覆盖 History 对象中的当前记录。。

<p>Enjoy this page for a second, because you won't be coming back here.</p>
<script>
    setTimeout(function(){
        location.replace("http://www.wrox.com");
    },1000);
</script>

reload():参数为空，且页面内容未发生改变，默认从浏览器缓存中重新加载，参数为true时，则从服务器重新加载。

location.reload();
location.reload(true);

因reload()调用后的代码因网络延迟等问题，执行具有不确定性，所以reload()应位于代码最后一行。