一、History对象

1.什么是History

History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释 :没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。

2.history对象的方法

  • back()方法会让浏览器加载前一个浏览过的文档。 history.back()等效于浏览器中的“后退”按钮
  • forward()方法会让浏览器加载后一个浏览的文档。history. forward()等效于浏览器中的“前进”按钮
  • go(n)方法
    history.go(1)代表前进一页,相当于浏览器中的前进按照,等价于forward()方法
    history.go(-1)代表后退一页,相当于浏览器中的后退按钮,等价于back()方法

3.代码

<!DOCTYPE html>
<html>
<head>
<script>
function goBack(){window.history.go(-2)}
</script>
</head>
<body><input type="button" value="Go 2 pages back" onclick="goBack()"></body>
</html>
二、location对象

1.什么是location

Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。

2.location对象的属性和方法

属性:location.href
可读可写,设置或返回当前的URL地址。

属性:location.host
可读可写,设置或返回当前 URL 的主机名称和端口号。

属性:location.hostname
可读可写,设置或返回当前 URL 的主机名称。

属性:location.href
可读可写,设置或返回 URL 的锚部分(从 # 号开始的部分)。

属性:location.port
可读可写,设置或返回 URL 的端口号。

属性:location.pathname
可读可写,设置或返回 URL 的路径部分。也就是端口号之后,从/开始。

属性:location.protocol
可读可写,设置或返回 URL 的协议。

属性:location.search
可读可写,设置或返回 URL 的参数部分,从?开始,包含?。

方法:location.assign(url)
加载新的文档,其实就是跳转新的地址。

方法:location.reload(true/false)
刷新当前页面,false与F5刷新一样,true与shift+F5一样。

方法:location.replace(url)
跳转新的地址,且没有历史记录在浏览器,也就是替换当前的文档。

3.代码

//对象中的属性和方法
//location 对象
console.log(window.location);//地址栏上#及后面的内容
console.log(window.location.hash);
//主机及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径----相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);//设置跳转的页面地址
location.href="http://www.3mooc.com";//属性-----
location.assign("http://www.3mooc.com");//方法
location.reload();//重新加载
location.replace("http://www.3mooc.com");//没有历史记录----不能返回原页面

BOM History和location相关推荐

  1. JavaScript操作BOM对象 - document对象; history 和 location对象 ,对话框,Date时间对象...

    getElementById返回拥有指定id的第一个对象(注意只是一个且是第一个)getElementsByName返回带有指定名称的对象集合getElementsBytagNam返回指定标签的对象集 ...

  2. html5中的图片的location,HTML5中的History和Location对象

    今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...

  3. JavaScript基础15-day17【BOM(Navigator、History、Location)、定时器、切换图片练习、轮播图】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  4. JavaScript之BOM对象(JS函数作用域、window、history、location对象)

    文章目录 一.JS作用域 二.window窗口 三.history对象 四.location对象 本篇文章来简单介绍一下JS作用域,以及BOM对象中的三个基础对象,分别是window对象.histor ...

  5. 有关window的history和location的使用

    history 有关客户访问过的 URL 信息 location 有关当前的URL信息 location的属性: 属性 描述 closed 返回窗口是否已被关闭. defaultStatus 设置或返 ...

  6. javascript基础——window对象(screen、history、location、navigator、window对象常用方法、window对象常用事件)

    1.screen window.screen 对象包含有关用户屏幕的信息 screen.availWidth 屏幕宽度 screen.availHeight  屏幕高度 2.history forwa ...

  7. BOM中的location对象

    location对象是window对象下的一个属性,使用的时候可以省略window对象. location可以获取或者设置浏览器地址栏的URL 在控制台输入location,展开可以看到它的成员.其中 ...

  8. JavaScript大杂烩9 - 理解BOM

    毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript ...

  9. 【前端2】js:原始类型,运算符,调试,页面加载,轮播图,Bom(对象,时钟),Dom(全选全不选,省市级联,隔行/触摸换色,表单校验)

    文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...

最新文章

  1. 转载CSDN - 从程序员到HR——面试经验分享
  2. 50个ggplot2可视化案例
  3. Selenium的简单操作
  4. 定积分证明题例题_第二十天(20,11,27):积分中值定理
  5. Spark RDD与DataFrame
  6. C++实现utf8和gbk编码字符串互相转换
  7. ADT安装好在Eclipse后运行模型Android提示Re-installation fai...
  8. 如何设置任务栏和开始菜单属性中的 分组相似任务栏按钮 的个数
  9. python颜色表_Python:数据可视化,必须注意的30个小技巧
  10. hwclock(Linux)
  11. MaterialImageLoading
  12. 如何在HTML中使用JavaScript代码
  13. Visual FoxPro已经过时了吗 ?我也经常问自己!
  14. Scala语言精华版笔记整理
  15. Linux--安装iRedMail惊魂记
  16. 新疆大盘鸡的标准做法
  17. acrobat导出html没图片,PDF 导出的文件格式选项
  18. 通过Node.js解析stl文件
  19. 希腊字母及对应的英文
  20. 用Photoshop去除图片中的原有文字

热门文章

  1. Java图片处理开源框架-Thumbnailator
  2. 《音速小子索尼克4:第一章》基本操作及BOSS攻略
  3. matlab仿真是基于什么原理,仿真模拟的原理是什么?为什么要模拟呀? - 仿真模拟 - 小木虫 - 学术 科研 互动社区...
  4. DIY 老毛桃PE+360急救盘+CDlinux
  5. 5-12 Python条件语句、循环语句、While循环语句、break语句、continue语句、pass语句
  6. 八猴模型html文件,4年来首次更新!八猴4.0都有哪些新功能?
  7. 功夫茶篇∞潮州工夫茶:究天人之际
  8. Corda ledger 概念性非技术白皮书
  9. 流媒体传输协议之 RTP
  10. Kvm 平台自定义网络的方式