深究JavaScriptJavaScript 进阶营web前端开发

JavaScriptBOM__History_location(

2019-11-28  本文已影响0人  终身成长人格

目录:

1.History对象

2.location对象

一、History对象

1.什么是History

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

2.history对象的方法

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_Navigator_Screen

参考教程视频:https://www.3mooc.com/front/couinfo/228

上一篇 下一篇

猜你喜欢

热点阅读