HTML DOM Location实例讲解

最新推荐文章于 2024-07-12 20:49:16 发布

wuxiaopengnihao1

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量295

点赞数

文章标签： html java javascript

本文链接：https://blog.csdn.net/wuxiaopengnihao1/article/details/127567017

版权

HTML DOM 中的位置对象用于提供有关网页当前 URL 的信息。该对象是窗口对象的子部分。因为它通过使用 window.location 属性获取信息。位置对象用于检索有关哈希值、主机名、端口号和协议名称等信息。

下面是下面给出的预定义属性和方法。

属性：

hash:它用于设置或返回 URL 的锚部分 (#)。
host:用于设置或返回当前网页 URL 的主机名和端口号。
hostname:用于设置或返回主机名或网站名称，如“www.geeksforgeeks.org”。
href:用于设置或返回网页的整个当前 url 的值。
origin:它用于返回当前 URL 的协议、主机名和端口号。
pathname:用于设置或返回网页路径名的值。
port:用于设置或返回当前 URL 的端口号。
protocol:用于设置或返回当前 URL 的协议名称。
search:它用于设置或返回 URL 的查询字符串部分的值。

方法：

assign()：它可用于加载新文档，但这两种方法之间的区别在于 replace() 方法从文档历史记录中删除了当前文档的 URL，因此无法使用 “back” 按钮导航回原始文档。
reload()：它用于重新加载当前文档。
replace()：它用于用新文档替换当前文档。

注意：所有主流浏览器都支持位置对象的所有属性和方法。

下面的示例说明了如何访问位置对象的属性和方法。

范例1：下面的代码返回 URL 的协议、端口号和主机名。

HTML


<!DOCTYPE html>
<html lang="en">
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>DOM Location origin property</b>
  
    <button onclick="getOrigin();">
        Get Location Origin
    </button>
  
    <p>The location origin of this page is:</p>
  
    <div class="location"></div>
  
    <script>
        function getOrigin() {
            let loc = location.origin;
            document.querySelector(
                '.location').innerHTML = loc;
        }
    </script>
</body>
</html>

输出：

范例2：下面的代码说明了在位置对象中使用 assign() 方法。

HTML


<!DOCTYPE html>
<html>
  
<head>
    <title>Location assign() Method in HTML</title>
  
    <style>
        h1 {
            color:green;
        }
          
        h2 {
            font-family:Impact;
        }
          
        body {
            text-align:center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>Location assign() Method</h2>
  
    <p>
        For loading a new document, double 
        click the "Load Document" button:
    </p>
  
    <button ondblclick="load()">
        Load Document
    </button>
  
    <script>
        function load() {
            location.assign("https://www.geeksforgeeks.org");
        }
    </script>
</body>
</html>

输出：