Location 对象操作 URL 使用详解

た入场券 2022-04-13 07:40 407阅读 0赞

**目录**

Location 对象属性

href 属性

Location 对象方法

reload() 方法

--------------------

# Location 对象属性 #

1、Location 对象包含当前 URL 的有关信息。

2、Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

<table>  Location 对象属性  
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_hash.asp" rel="nofollow">hash</a></td> 
   <td>设置或返回从井号 (#) 开始的 URL（锚）。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_host.asp" rel="nofollow">host</a></td> 
   <td> <p>设置或返回主机名和当前 URL 的端口号。host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号部分。</p> <p>语法：location.host.</p> <p>这在动态获取服务器Ip与端口时非常有用，比如 H5 中的 WebSocket 连接服务器时，不可能写死服务器的 ip 与端口，此时使用这种方式即可。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_hostname.asp" rel="nofollow">hostname</a></td> 
   <td> <p>设置或返回当前 URL 的主机名。</p> <p>hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名部分。</p> <p>语法：location.hostname</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_href.asp" rel="nofollow">href</a></td> 
   <td>设置或返回完整的 URL。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_pathname.asp" rel="nofollow">pathname</a></td> 
   <td>设置或返回当前 URL 的路径部分。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_port.asp" rel="nofollow">port</a></td> 
   <td> <p>设置或返回当前 URL 的端口号。</p> <p>port 属性是一个可读可写的字符串，可设置或返回当前 URL 的端口部分。</p> <p>语法：location.port=portnumber</p> </td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_protocol.asp" rel="nofollow">protocol</a></td> 
   <td>设置或返回当前 URL 的协议。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/prop_loc_search.asp" rel="nofollow">search</a></td> 
   <td>设置或返回从问号 (?) 开始的 URL（查询部分）。</td> 
  </tr> 
 </tbody> 
</table>

![20181128110758723.gif][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <style>
            .showInfo {
                width: 500px;
                height: 250px;
                overflow: auto;
                background-color: #999999;
                color: white;
            }
        </style>
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                /**获取 Url 地址中的主机名与端口
                 */
                $("#host").click(function () {
                    /**
                     * 获取 url 地址的主机名与端口号，如：192.168.1.20:63333、localhost:63333
                     * 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址；如果 Url 省略 80 端口，则获取的同样只有主机名
                     * host 的值始终保持与 url 地址中的一致
                     * @type {string}
                     */
                    let urlHost = window.location.host;
                    $(".showInfo").append("host=" + urlHost + "<br>");
                });
    
                /**获取 Url 地址中的主机名
                 */
                $("#hostname").click(function () {
                    /**
                     * 获取 url 地址的主机名，如：192.168.1.20、localhost、www.baidu.com
                     * 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址
                     * hostname 的值始终保持与 url 地址中的一致
                     * @type {string}
                     */
                    let urlHostname = location.hostname;
                    $(".showInfo").append("hostname=" + urlHostname + "<br>");
                });
    
                /**获取 Url 地址中的端口部分
                 */
                $("#port").click(function () {
                    /**
                     * 获取 url 地址的端口号，如：63333、8080，如果 Url 中是省略的 80 的端口，则返回为空
                     * port 的值始终保持与 url 地址中的一致
                     * @type {string}
                     */
                    let urlPort = location.port;
                    $(".showInfo").append("port=" + urlPort + "<br>");
                });
            });
        </script>
    
    </head>
    <body>
    <div class="showInfo">
    
    </div>
    <button id="host">host</button>
    <button id="hostname">hostname</button>
    <button id="port">port</button>
    </body>
    </html>

## href 属性 ##

1、href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。因此可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

![20181128111810742.gif][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <style>
            .showInfo {
                width: 600px;
                height: 100px;
                overflow: auto;
                background-color: #999999;
                color: white;
            }
        </style>
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                /**获取浏览器地址栏 Url 地址
                 */
                $("#href1").click(function () {
                    let url = window.location.href;
                    $(".showInfo").append("url=" + url + "<br>");
                });
    
                /**设置浏览器地址栏 新 Url地址，浏览器会自动跳转
                 */
                $("#href2").click(function () {
                     /**
                     * href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。
                     * 因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。
                     * 注意：如过加了 http:// 或者 https:// 写一条，则会被当做绝对路径操作
                     * 如果没有没有加写一条时，如 www.baidu.com,则会被当做相对路径处理，即相对本应用
                     */
                    location.href = "http://www.baidu.com";
                });
            });
        </script>
    
    </head>
    <body>
    <div class="showInfo">
    
    </div>
    <button id="href1">获取当前url</button>
    <button id="href2">前往www.baidu.com</button>
    </body>
    </html>

# Location 对象方法 #

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/met_loc_assign.asp" rel="nofollow">assign()</a></td> 
   <td>加载新的文档。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/met_loc_reload.asp" rel="nofollow">reload()</a></td> 
   <td>重新加载当前文档。</td> 
  </tr> 
  <tr> 
   <td><a href="http://www.w3school.com.cn/jsref/met_loc_replace.asp" rel="nofollow">replace()</a></td> 
   <td>用新的文档替换当前文档。</td> 
  </tr> 
 </tbody> 
</table>

## reload() 方法 ##

1、reload() 方法用于重新加载当前文档。语法：location.reload(force)

2、说明：如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

3、如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                /**普通刷新当前文档
                 */
                $("#reload1").click(function () {
                    window.location.reload();
                });
    
                /**强制刷新当前文档
                 */
                $("#reload2").click(function () {
                    location.reload(true);
                });
            });
        </script>

[20181128110758723.gif]: /images/20220413/178a09af071d417bb666593a0a12b1d4.png
[20181128111810742.gif]: /images/20220413/ec56ebab658f4d898cd342a6eb6b8aaf.png