JavaScript中的location对象

简介：

location 是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性；换句话说，window.location 和document.location 引用的是同一个对象。

location用于获取或设置窗体的URL，并且可以用于解析URL。

属性：

1.location.href

包含整个 URL 的一个DOMString

2.location.protocol (en-US)

包含 URL 对应协议的一个DOMString，最后有一个":"。

3.location.host

包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上 URL 的端口号。

4.location.hostname

包含 URL 域名的一个DOMString。

5.location.port (en-US)

包含端口号的一个DOMString。

6.location.pathname (en-US)

包含 URL 中路径部分的一个DOMString，开头有一个“/"。

7.location.search *

包含 URL 参数的一个DOMString，开头有一个“?”。

8.location.hash *

包含块标识符的DOMString，开头有一个“#”。

案例：

      //创建元素a并使用href属性
      //更正确的选择是浏览到URL并使用document.location或window.location
      var url = document.createElement('a');
      url.href ='https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
      console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
      console.log(url.protocol); // https:
      console.log(url.host); // developer.mozilla.org
      console.log(url.hostname); // developer.mozilla.org
      console.log(url.port); // (blank - https assumes port 443)
      console.log(url.pathname); // /en-US/search
      console.log(url.search); // ?q=URL
      console.log(url.hash); // #search-results-close-container
      console.log(url.origin); // https://developer.mozilla.org

结果为：

方法

1.location.assign()

加载给定 URL 的内容资源到这个 location 对象所关联的对象上。

2.location.reload()

重新加载来自当前 URL 的资源。他有一个特殊的可选参数，类型为 Boolean (en-US)，该参数为 true 时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

3.location.replace()

用给定的 URL 替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

4.location.toString()

返回一个DOMString，包含整个 URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改 location 的值的。

案例：

<a href="https://www.cnblogs.com/qianduanLamp/p/16547244.html" id="url"></a>
<button onclick="myAssign()">assign()</button>
<button onclick="myReload()">reload()</button>
<button onclick="myReplace()">replace()</button>
<button onclick="myToString()">toString()</button>
  　<script>
      var url = 'https://www.cnblogs.com/qianduanLamp';
      function myAssign() {
        location.assign(url);
      }
      function myReload() {
        location.reload();
      }
      function myReplace() {
        location.replace(url);
      }
      function myToString() {
        var url = document.getElementById('url');
        var str = url.toString();
        alert(str);
      }
    </script>