window.location对象、window.navigator对象、window.history对象

location 对象是 window 对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

URL 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含信息指出文件的位置以及浏览器应该怎么处理它。
URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http,ftp,maito等
host	主机（域名）www.baidu.com
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个‘/’符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分割开来
fragment	片段 #后面内容常见于链接锚点

location对象的属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.baidu.com
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><button>click</button><span></span><script>// location.href// var btn = document.querySelector('button');// var span = document.querySelector('span');// btn.addEventListener('click', function() {//     // console.log(location.href);//     location.href = 'http://www.baidu.com'// })// 倒计时 5 秒跳转页面// setInterval(time, 1000);// var second = 5;// function time() {//     if (second == 0) {//         location.href = 'http://www.baidu.com'//     }//     span.innerHTML = '再等' + second + '秒跳转页面';//     second--;// }// location.search 获取URL参数数据// var btn = document.querySelector('button');// var span = document.querySelector('span');// btn.addEventListener('click', function() {//     // console.log(location.search);//     var names = location.search.split('=');//     console.log(names);//     span.innerHTML = names[1]// });// location.assign() | location.replace() | location.reload()var btn = document.querySelector('button');var span = document.querySelector('span');// btn.addEventListener('click', function() {// 记录浏览器历实，具有后退功能// location.assign('http://www.baidu.com');// 不记录浏览器历实，没有后退功能// location.replace('http://www.baidu.com');// 重新加载页面，相当于刷新按钮或者F5, 如果参数为 true 强制刷新 ctrl + F5// location.reload(true);// });</script>
</body></html>

navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。

下面前端代码可以判断用户那个终端打开页面，实现跳转。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>if ((navigator.userAgent.match(/(phone|pad|pod|iphone|ipod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennce|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phoone)/i))) {window.location.href = ''; // 手机} else {window.location.href = ''; // 电脑}</script>
</body></html>

history对象与浏览器历实记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

// window.historyvar btn = document.querySelector('button');btn.addEventListener('click', function() {// history.forward(); 前进// history.back(); 后退// history.go(); 参数 1 前进一个页面, -1 后退一个页面})

window.location对象、window.navigator对象、window.history对象相关推荐

window.location.reload(false);window.location.reload(true);history.Go(0)区别
在日常工作中常用的页面刷新方式的区别: 1 window.location.reload(false); 先说说window.location.reload(false);当我们window.lo ...
JavaScript-筑基（二十五）navigator对象（判断页面打开终端）、history对象
navigator对象包含有关游览器的信息,它有很多属性,我们常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值. 下面前端代码可以判断用户那个终端打开页面,实 ...
vf更改当前路径_这份 window.location 备忘单，让你更有条理解决地址路径问题！...
如果你想获取站点的URL信息,那么window.location对象什么很适合你!使用其属性获取有关当前页面地址的信息,或使用其方法进行某些页面重定向或刷新? https://segmentfault ...
window.location跳转和window.open跳转以及从url地址栏获取参数
路由跳转 1.window.location跳转和window.open跳转 a.跳转 a.在当前页面跳转 window.location = "/xxx/xxx/xxx?a=" ...
window.location.Reload()和window.location.href 区别
首先介绍两个方法的语法: reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])参数: bForceGet, 可选参数, 默认为 false ...
用Location对象和history对象修改页面url
用Location对象和history对象修改页面url 1.通过hash属性更改url Location 对象包含有关当前 URL 的信息 Location.hash是URL的锚部分 Locatio ...
asp.net mvc 地址栏传输信息报错：window.location.pathname
asp.net mvc 地址栏传输信息报错:window.location.pathname 前端cshtml代码内容代码片. // 页面跳转 window.location.pathname = ...
BOM函数之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
History 对象的pushState()和replaceState()
今天在看vue-router的时候发现,vue-router源码用到了history.pushState()和history.replaceState(),故,仔细看一下. 一. 概述 window. ...

window.location对象、window.navigator对象、window.history对象

window.location对象、window.navigator对象、window.history对象相关推荐

最新文章

热门文章