zoukankan      html  css  js  c++  java
  • JS之BOM编程History和location对象

    History对象

    History 对象包含用户(在浏览器窗口中)访问过的 URL。
    History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

    History对象属性及描述

    length 返回浏览器历史列表中的 URL 数量。

    History对象方法及描述
    • back():
      加载history列表中的前一个 URL。
    • forward():
      加载history列表中的下一个 URL。
    • go():
      加载history列表中的某个具体页面。
    History对象描述

    History对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

    代码示例

    test.html:

    <body>
    	<a href="index.html">跳转到index页面</a>
    </body>
    

    index.html:

    <body>
    	这是index页面
    	<input type="button" value="后退" 
    		onclick="window.history.back()" />
    	<input type="button" value="后退" 
    		onclick="window.history.go(-1)" />
    </body>
    

    在这里插入图片描述
    点击链接:
    在这里插入图片描述
    点击后退会再次回到test页面。

    location对象

    1、Location对象包含有关当前 URL 的信息。
    2、Location对象是Window对象的一个部分,可通过window.location属性来访问。
    3、例子:把用户带到一个新的地址

    Location对象属性及描述

    hash:设置或返回从井号 (#) 开始的 URL(锚)。
    host:设置或返回主机名和当前 URL 的端口号。
    hostname:设置或返回当前 URL 的主机名。
    href:设置或返回完整的 URL。
    pathname:设置或返回当前 URL 的路径部分。
    port:设置或返回当前 URL 的端口号。
    protocol:设置或返回当前 URL 的协议。
    search:设置或返回从问号 (?) 开始的 URL(查询部分)。

    Location对象方法及描述

    assign():加载新的文档。
    reload():重新加载当前文档。
    replace():用新的文档替换当前文档。

    代码示例
    <body>
    	<script>
    		function goBaiDu(){
    			//获取location对象
    			var locationObj =  window.location;
    			locationObj.href = "http://www.baidu.com";
    			//使用下面的方式也可以
    			//document.location.href = "http://www.baidu.com";
    		}
    	</script>
    	<input type="button"  value="去百度" onclick="goBaiDu()" />
    </body>
    

    在这里插入图片描述
    点击按钮跳转到百度首页。

  • 相关阅读:
    Elasticsearch常用命令
    Linux中使用systemctl操作服务、新建自定义服务
    Windows下安装MongoDB解压版
    Java执行cmd命令、bat脚本、linux命令,shell脚本等
    Ubuntu
    PostgreSQL删除数据库失败处理
    Ubuntu service 命令
    Ubuntu18修改/迁移mysql5.7数据存放路径
    攻防世界-web-ics-02(sql注入、ssrf、目录扫描)
    攻防世界-web-filemanager(源码泄漏、二次注入)
  • 原文地址:https://www.cnblogs.com/yu011/p/13657849.html
Copyright © 2011-2022 走看看