• HTML DOM Location实例讲解

    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

    1.  
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <body>
    5.     <h1 style="color:green">GeeksforGeeks</h1>
    6.     <b>DOM Location origin property</b>
    7.   
    8.     <button onclick="getOrigin();">
    9.         Get Location Origin
    10.     </button>
    11.   
    12.     <p>The location origin of this page is:</p>
    13.   
    14.     <div class="location"></div>
    15.   
    16.     <script>
    17.         function getOrigin() {
    18.             let loc = location.origin;
    19.             document.querySelector(
    20.                 '.location').innerHTML = loc;
    21.         }
    22.     </script>
    23. </body>
    24. </html>

    输出：

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

    HTML

    1.  
    2. <!DOCTYPE html>
    3. <html>
    4.   
    5. <head>
    6.     <title>Location assign() Method in HTML</title>
    7.   
    8.     <style>
    9.         h1 {
    10.             color:green;
    11.         }
    12.           
    13.         h2 {
    14.             font-family:Impact;
    15.         }
    16.           
    17.         body {
    18.             text-align:center;
    19.         }
    20.     </style>
    21. </head>
    22.   
    23. <body>
    24.   
    25.     <h1>GeeksforGeeks</h1>
    26.     <h2>Location assign() Method</h2>
    27.   
    28.     <p>
    29.         For loading a new document, double 
    30.         click the "Load Document" button:
    31.     </p>
    32.   
    33.     <button ondblclick="load()">
    34.         Load Document
    35.     </button>
    36.   
    37.     <script>
    38.         function load() {
    39.             location.assign("https://www.geeksforgeeks.org");
    40.         }
    41.     </script>
    42. </body>
    43. </html>
    44.                      

    输出：

    支持的网络浏览器：

    • 谷歌浏览器
    • IE浏览器
    • Firefox
    • Opera
    • Safari

    好了， 以上是本文所有内容，希望对大家有所帮助，也希望大家对码农之家多多支持，你们的支持是我创作的动力！祝大家生活愉快！

  • 相关阅读:
    DITA-OT 4.0新特性 - PDF themes，定制PDF样式的新方法
    【Python百日进阶-WEB开发】Day169 - Django案例：01工程创建和基本配置
    互融云人行二代征信系统对接服务
    Element-plus使用记录
    Nginx和Ribbon实现负载均衡的区别
    知识点4--CMS项目首页登录注册
    关于毕业论文降重技巧大家掌握了多少呢？
    python 文创产品商城推荐网上购物系统设计与实现vue
    浅析ArkTS的起源和演进
    LEARN GIT
  • 原文地址：https://blog.csdn.net/wuxiaopengnihao1/article/details/127567017