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>
    

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

  • 相关阅读:
    JDK源码学习之 java.util.concurrent.automic包
    本地工程引入maven工程的配置方式
    JAVA配置&注解方式搭建简单的SpringMVC前后台交互系统
    Spring常用注解简析
    HTTP/HTTPS GET&POST两种方式的实现方法
    【JS语法】作用域与绑定图示
    【编程范式】函数式基础图示
    【技术思维】写好你的博客
    在Nginx服务器上用Jenkins发布Vue/React代码的步骤
    React事件绑定总结
  • 原文地址:https://www.cnblogs.com/yu011/p/13657849.html
Copyright © 2011-2022 走看看