location 和 history
Location 对象:封装了浏览器地址栏的 URL 信息
一、hash
返回 URL
中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串
#
位置标识符 : 当前页面的位置信息, 比如: 跳转顶部
console.log(location.hash); // ""
二、host
: 返回服务器名称和端口号
console.log(location.host); // "localhost:63342"
三、hostname
: 返回不带端口号的服务器名称
console.log(location.hostname); // localhost
四、href
: 返回当前价在页面的完整 URL
console.log(location.href); // http://localhost:63342/htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.html?_ijt=hiop2dovhunhqnn2udlbo9ncbulocation.href = 'www.baidu.com'; // 跳转到其他页面
如果直接将 location.href
属性修改为一个绝对路径(或相对路径),则页面会自动跳转到该路径,并生成相应的历史记录。
五、pathname
: 返回 URL
中的 目录 和 文件名
console.log(location.pathname); // /htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.htmlAndCss
六、port
: 返回 URL
中执行的端口号
如果 URL
中不包含端口号, 则返回空字符串
console.log(location.port); // 63342
七、protocol
: 返回页面使用的协议, 通常指的是 http
/ https
console.log(location.protocol); // http:
八、search
: 返回 URL
的查询字符串, 这个字符串以 ?
开头
console.log(location.search); // ?_ijt=hiop2dovhunhqnn2udlbo9ncbu
Location 对象的方法
一、location.reload()
– 刷新页面
location.reload(); // 重新加载当前页面location.reload(true); // 在方法中传递一个 true,则会强制清空缓存刷新页面
二、location.assign(str)
– 跳转页面
location.assign('www.baidu.com'); // 作用和直接修改 location.href 一样。
三、location.replcace()
– 替换当前页面
location.replace('http://www.baidu.com');
使用一个新的页面替换当前的页面,调用完毕也会跳转页面。但不会生成历史纪录,不能使用(后退按钮)后退。
四、encodeURI('')
– 中文 - URI编码
console.log('恰饭'); // %E6%81%B0%E9%A5%AD
五、decodeURI('')
– URI编码 - 中文
console.log('%E6%81%B0%E9%A5%AD'); // 恰饭
History 对象
history
对象:可以用来操作浏览器的向前或向后翻页。
history.length;
获取浏览器历史列表中的 url
数量。注意,只是统计当次的数量,如果浏览器关了,数量会重置为 1
history.back();
– 用来回退到上一个页面,作用和浏览器的[回退按钮]一样。
history.forward();
– 用来跳转下一个页面,作用和浏览器的[前进按钮]一样。
history.go();
– 向前 / 向后跳转 n 个页面。
history.go(1); // 向前跳转一个页面,相当于 history.forword()
history.go(2); // 向前跳转两个页面
history.go(0); // 刷新当前页面
history.go(-1); // 向后跳转一个页面,相当于 history.back()
history.go(-2); // 向后跳两个页面
location 和 history相关推荐
- javascript的浏览器Bom详解,window、location、history对象
BOM(BrowserObjectModel)也叫浏览器对象模型,描述与浏览器进行交互的方法和接口.BOM由多个对象组成, 其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对 ...
- Location和History对象实现三个页面跳转
Location对象需要用到的href属性,设置完整或者检索完整URL字符串 History对象:有关客户访问过的URL的信息. 想要实现这个页面的跳转就要了解History对象的三种方法分别是bac ...
- javascript:history.go(-1)和javascript:history.back(-1)
javascript:history.go(-1)和javascript:history.back(-1) 转自:http://hi.baidu.com/chy0806css/item/b72344a ...
- 浏览记录-history
这里写自定义目录标题 PushHistory PushHistory location.replace location.href = window.location.hash = History.p ...
- history.pushState()
history.pushState()解释向浏览器历史添加了增加一个记录. history.pushState(stateObject, title, url); stateObject:状态 tit ...
- history源码解析-管理会话历史记录
history是一个JavaScript库,可让你在JavaScript运行的任何地方轻松管理会话历史记录 1.前言 history是由Facebook维护的,react-router依赖于histo ...
- nginx导致vue设置history模式下的请求丢失参数
nginx导致vue设置history模式下的请求丢失参数 问题描述: 当访问下面的路径时参数会丢失: http://ip/vuecay/path1/path2?name=cay 演示效果: 可以看到 ...
- 改变浏览器URL不跳转 history.pushState
公司产品较多,涉及到不同站点相互跳转传参,携带的参数使用后不删除便会重复渲染,目前想到的办法就是第一次执行成功后就移除location.search: 使用 history.pushState(sta ...
- react history
GitHub上history库的翻译: 安装 npm install --save history 类型 import { createBrowserHistory, createHashHistor ...
最新文章
- 全面访问JavaScript的最佳资源
- MySQL 触发器错误
- ISO9000互联网管理办法
- 云厂商靠不靠谱?“国家级标准”鉴定结果来啦
- 第六章网络安全技术与产品考试要点及真题分布
- curl记录响应时间
- 计算机网络操作系统课件,计算机网络操作系统课件(张浩军版).ppt
- linux基础命令-查看系统状态-free -m以及top命令详解
- div+css 英文或数字自动换行
- 编程的未来 Java, C, Go, Swift, Dart? Uncle Bob Martin - The Future of Programming
- MySQL 主从同步方式
- VC6删除项目中的文件
- java笔画数_Java调用setStroke()方法设置笔画属性的语法 原创
- 由人类进化想到软件的作用
- CTF-实验吧后台登陆
- python心率检测
- 基于51单片机的智能门禁控制系统
- hdfs文件系统和linux文件系统,分布式文件系统HADOOP HDFS与传统文件系统LINUX FS的比较与分析...
- VC :在对话框中绘图
- 用类模板实现容器存储自定义数据类型(类似于STL里面的vector)
热门文章
- python名称空间与运用域_Python名称空间和作用域讲座,命名,Namespaces,Scopes
- php 代码 自动检查工具下载,PHP_CodeSniffer安装和使用教程(自动代码检查规范工具)...
- fiddler修改支付金额_不容忽视的记账工具:支付宝记账
- SpringBoot + ShardingSphere 秒级分库分表!
- 彻夜怒肝!Spring Boot+Sentinel+Nacos高并发已撸完,快要裂开了!
- Java中这7个方法,一不小心就用错了!
- 【MATLAB】无人驾驶车辆的模型预测控制技术(精简讲解和代码)【运动学轨迹规划】
- Android下 布局加边框 指定背景色 半透明
- 存储管理实验linux,07-存储管理器实验
- java 开发详解_面向接口编程详解-Java篇