JavaScript

JS Location对象(获取URL)

下文笔者讲述JavaScript中Location对象的简介说明,如下所示

Location对象简介说明

Location对象指:
     当前页面链接的信息
如:
  当前链接的URL、端口、协议、锚节点信息等

HTML网页获取Location对象的方法:
  window.location.href可简写为location.href

location对象中属性

属性 备注
hash 返回一个URL 中锚的部分，例如：https://www.linux28.com#js 中的 #js
host 返回一个URL 的主机名和端口号，例如 https://www.linux28.com:8080
hostname 返回一个URL 的主机名，例如 https://www.linux28.com
href 返回一个完整的URL，例如 https://www.linux28.com/javascript/location-object.html
pathname 返回一个URL 中的路径部分，开头有个/
port 返回一个 URL中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串' '
protocol 返回一个URL 协议，即 URL 中冒号:及其之前的部分，如 http: 和 https:
search 返回一个URL中的查询部分，即 URL 中?及其之后的一系列查询参数
例:location对象的示例分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <a href="https://www.linux28.com:8080/javascript/location-objcet.html?course=javascript&title=location#content" id="url"></a>
    <script type="text/javascript">
        var url = document.getElementById('url');
        document.write("<b>hash：</b>" + url.hash + "<br>");
        document.write("<b>host：</b>" + url.host + "<br>");
        document.write("<b>hostname：</b>" + url.hostname + "<br>");
        document.write("<b>href：</b>" + url.href + "<br>");
        document.write("<b>pathname：</b>" + url.pathname + "<br>");
        document.write("<b>port：</b>" + url.port + "<br>");
        document.write("<b>protocol：</b>" + url.protocol + "<br>");
        document.write("<b>search：</b>" + url.search + "<br>");
    </script>
</body>
</html>

----运行以上代码,将输出以下信息
hash：#content
host：www.linux28.com:8080
hostname：www.linux28.com
href：https://www.linux28.com:8080/javascript/location-objcet.html?course=javascript&title=location#content
pathname：/javascript/location-objcet.html
port：8080
protocol：http:
search：?course=javascript&title=location

location对象中方法

方法 备注
assign() 加载指定的 URL，即载入指定的文档
reload() 重新加载当前 URL
replace() 用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面
toString() 与href 属性的效果相同，以字符串的形式返回当前完整的 URL
例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <a href="https://www.linux28.com:8080/javascript/location-objcet.html?course=javascript&title=location#content" id="url"></a>
    <button onclick="myAssign()">assign()</button>
    <button onclick="myReload()">reload()</button>
    <button onclick="myReplace()">replace()</button>
    <button onclick="myToString()">toString()</button>
    <script type="text/javascript">
        var url = 'https://www.linux28.com';
        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>
</body>
</html>
javascript之Location对象的简介说明