本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

location对象：

location对象，是BOM最有用的对象之一了，是window的属性(子对象)，它提供了与当前窗口中加载文档的URL，还提供一些导航及载入文档的方法；

location对象很特别，即是window对象的属性，也是document对象的属性，即window.location与document.location引用的是同一个对象；

location对象的特点是，它不仅保存着当前文档的信息，它还将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段；

属性：

hash：返回URL中的hash，即井号 (#)后跟的多个字符，即URL中的锚，如果没有，则返回空字符串；如：#name；host：返回主机名和端口号(如果有)，如：；hostname：返回当前主机名不包括端口号，如：；origin：只读，返回当前协议、主机名和端品号，如：；href：返回当前加载页面的完整URL，location对象的toString()也返回这个值，如：；pathname：返回当前 URL 的路径部分，即目录和文件名，如：/edu/index.html；port：返回当前 URL中的端口号，如果没有，则返回空字符串，如：8080；protocol：返回当前 URL 的协议，通常是http或https；search：返回从问号 (?) 开始的查询字符串，如：?q=wangwei

方法：

assign()：加载新的文档；reload()：重新加载当前文档；replace()：用新的文档替换当前文档；

解析URL：

location对象的href属性是一个字符串，包含URL的完整文本；location对象的toString()方法返回href属性的值，因此在会隐匿调用toString()的情况下，可以使用location代替location.href；

console.log(location);console.log(location.href);console.log(location.toString());console.log(location + "");  // 字符串// 可以直接赋值，即为location.href = urllocation = ";;  <!-- 页面跳转 --><p>页面会在<span id="result"></span>秒后跳转到:;/p><script>var n = 5;result.innerText = n;setInterval(function(){    n--;    if(n==0)        location.href = ";;    else        result.innerText = n;},1000);</script>

其他的属性都表示URL的各个部分，它们被称为“URL分解”属性，同时被Link对象（html中的<a>和<area>元素）支持；这些属性都是可写的；

// 获取页面名var pathname = location.pathname;var pagename = pathname.substring(pathname.lastIndexOf('/')+1);console.log(pagename);

查询字符串参数：

获取参数可以通过Location对象的search属性，获得从URL中传递过来的参数和参数值，但不能逐个访问参数，因此需要单独解析查询字符，用以处理需要获取的参数和参数值；

function getQueryString(){    // 取得查询字符串并去掉开头的问    var qs = location.search.length > 0 ? location.search.substring(1) : "";    // 保存数据的对象    var args = {};    // 取得每一项    var items = qs.length ? qs.split("&") : [];    var item = null, name=null, value = null;     var 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;}// 应用，假定为：?q=zeronetwork&num=100var args = getQueryString();alert(args["q"]);  //zeonetworkalert(args["num"]);  // 100

加载新文档：

在实际场景中，时常会用到加载一个新的网页的情况；此时可以用Location对象的href属性就可以轻松完成这一功能，该属性返回值为当前文档的URL，如果将该属性值设置为新的URL，那么浏览器会自动加载该URL的内容，从而达到加载一个新的网页的目的；

console.log(location.href);location.href = ";;// 或者直接为location赋新的URL值window.location = ";;

如此，就能立即打开新的URL并在浏览器的历史记录中生成一条记录；

修改location对象的其他属性也可以改变当前加载的页面，如：

// 注意先后顺序location.pathname = "/edu/index.html";location.hash = "#selection1";location.search = "?q=wangwei";location.port = "8080";location.hostname = ";; function gotoUrl(){    window.location.href = ";;}// 传递参数function gotoUrl(url,catalogid){    var url = url + "?catalogid=" + catalogid;    window.location = url;}function gotoUrl(url,catalogid){    if(catalogid <= 0)        location = url;    else        location = url + "?catalogid=" + catalogid;}

每次修改location的属性（hash除外），页面都会以新的URL重新加载；

修改hash有可能不会在历史记录中生成一条记录；

<p id="info"></p><script>var s = 5;var info = document.getElementById("info");function go(){    if(s==0)        window.location.href = ";;    else        info.innerHTML = "浏览器将在" + s + "后跳转";    s--;}setInterval(go, 1000);</script>

Document对象也有一个URL属性，是文档首次载入后保存该文档的URL的字符串；

console.log(location.href == document.URL);

装载新文档与重新装入当前文档：

文档的装载在应用中也是比较常见的，有三个方法：assign、replace和reload；

// 使用按钮演示var mybtn = document.getElementById("mybtn");mybtn.addEventListener("click",function(){    // ...});

assign()方法：

使窗口载入并显示指定的URL中的文档；

window.location=URL与location.href=URL本质上都是调用了assign()方法；三者是等同的用法；location.assign(";);

replace()方法：

以上的方式修改URL后，在浏览器的历史记录中会生成一条新记录，因此用户通过单击“后退”按钮，都会导航到前一个页面；要禁用这种行为，可以使用replace()方法；该方法只接受一个URL参数，并不会在历史记录中生成新记录；

location.replace(";);// 如果浏览器不支持XMLHttpRequest对象，则重定向一个不需要Ajax的页面if(!XMLHttpRequest) location.replace("noajax.html");

注：relace()的URL参数可以是绝对或相对的URL；

reload()方法：

该方法用于根据浏览器reload按钮定义的策略重新加载当前窗口的文档；

reload()方法直接有可能从缓存中重新加载，如果加入参数true，会从服务器重新加载；

window.location=URL与location.href=URL本质上都是调用了assign()方法；三者是等同的用法；location.assign(";);

位于reload()方法调用之后的代码可能会也可能不会执行，这要取决于网络延迟或系统资源等因素，所以，reload()方法最好放到代码的最后一行；

history历史对象：

history浏览历史对象并不常用，是window对象的属性，其保存着用户浏览的历史记录，每个窗口，标签页以及每个框架，都有自己的history对象与特定的window对象关联；

当页面的URL改变时，就会生成一条历史记录；

但通过使用history对象可以获知浏览器窗口近来访问过的网页个数，还可以实现从一个页面跳到另一个页面，在实际应用中，如涉及到页面的跳转问题，可以用这个对象来解决；

go(n)方法：表示前进或后退; 参数是一个整数值，为正则前进，为负为后退; 如：

history.go(-1); // 后退一页history.go(1);  // 前进一页history.go(2);  // 前进2页也可以传历史记录中的字符串，如：history.go("baidu.com");

此时浏览器会跳转到历史记录中包含该字符串的第一个记录，有可能后退，也可能前进，具体要看哪个位置最近；如果历史记录中不包含该字符串，此时该方法什么也不做；

back()和forward()方法：

前进和后退，是go()的简写方法，如:

history.back();  // 后退一页history.forward();  // 前进一页

也可以创建自定义的前进和后退功能；

length属性:

获取历史记录中的数量；对于加载到窗口、标签页或框架中的第一个页面而言，其值为0；

alert(history.length);// 判断用户是不是打开窗口后第一个加载此页面if(history.length == 0){    alert("第一个打开的页面");}

如果窗口包含多个子窗口，子窗口的浏览历史会按时间顺序穿插在主窗口的历史中；这意味着在主窗口调用history.back()等方法可能会导致其中一个子窗口跳转，但主窗口保留当前状态不变；

history.pushState()和history.replaceState()：

HTML5为history对象添加了两个新方法：history.pushState()和history.replaceState()，用来在浏览历史中添加和修改记录；

state属性用来保存记录对象，而popstate事件用来监听history对象的变化；

history.pushState()方法向浏览器历史添加了一个状态；其可以传三个参数：一个状态对象、一个标题(现在被忽略了)以及一个可选的URL地址，如：history.pushState(state, title, url);

state：状态对象是一个由pushState()方法创建的、与历史纪录相关的javascript对象；如果不需要这个对象，此处可以填null；

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null；

URL：这个参数提供了新历史纪录的地址；新URL必须和当前URL在同一个域，否则，pushState()将丢出异常。这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL；

var stateObj = {foo:'bar'}history.pushState(stateObj,"new page 1", 'one.html');

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏的显示地址发生变化；

如果pushState的url参数，设置了一个新的锚点值(即hash)，并不会触发hashchange事件，即使新的URL和旧的只在hash上有区别；

如果设置了一个跨域网址，则会报错；这是由于同源策略限制；

history.replaceState方法的参数与pushState方法一模一样，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目；

history.pushState({page:1},"title 1", '?page=1');history.pushState({page:2},"title 2", '?page=2');history.replaceState({page:3},"title 3", '?page=3');// 显示;// 显示;// 显示; history.state属性返回当前页面的state对象history.pushState({page:3},'title 3','?page=3');console.log(history.state);

Web前端开发之JavaScript-零点程序员-王唯