js--7.bom对象-4.location

最新推荐文章于 2022-10-26 14:34:07 发布

qq_26553781

最新推荐文章于 2022-10-26 14:34:07 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/qq_26553781/article/details/79263913

版权

1 Location

1.1 概念

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

该对象中封装了浏览器的地址栏的信息

1.2 属性和方法

href属性：href属性可以获取或修改当前页面的完整的URL地址，使浏览器跳转到指定页面

assign()：所用和href一样，使浏览器跳转页面，新地址错误参数传递到assign ()方法中

replace()：功能一样，只不过使用replace方法跳转地址不会体现到历史记录中。

reload() 方法：用于强制刷新当前页面

1.3 刷新

1.4 demo

<script type="text/javascript">
           /*
            * Location
            * - 该对象中封装了浏览器的地址栏的信息
            */
           window.onload = function(){
             
              //获取按钮对象
              var btn = document.getElementById("btn");
             
              btn.onclick = function(){
                 
                  //如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
                  //alert(location);
                 
                  /*
                   * 如果直接将location属性修改为一个完整的路径，或相对路径
                   * 则我们页面会自动跳转到该路径，并且会生成相应的历史记录
                   */
                  //location = "http://www.baidu.com";
                  //location = "01.BOM.html";
                 
                  /*
                   * assign()
                   * - 用来跳转到其他的页面，作用和直接修改location一样
                   */
                  //location.assign("http://www.baidu.com");
                 
                  /*
                   * reload()
                   * - 用于重新加载当前页面，作用和刷新按钮一样
                   * - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
                   */
                  //location.reload(true);
                 
                  /*
                   * replace()
                   * - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
                   *     不会生成历史记录，不能使用回退按钮回退
                   */
                  location.replace("01.BOM.html");
                 
              };
             
           };
          
       </script>
    </head>
    <body>
      
       <button id="btn">点我一下</button>
      
       <h1>Location</h1>
      
       <input type="text" />
       <a href="01.BOM.html">去BOM</a>
    </body>
</html>