BOM中 location、navigator、history对象
2022/4/28 23:43:05
本文主要是介绍BOM中 location、navigator、history对象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
location对象
什么是location对象
window对象给我们提供了一个location属性用于获取或设置窗体的URL ,并且可以用于解析URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为location对象。
什么是URL
统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
语法格式:
LANGUAGE-BASHprotocol://hostname[:port]/path/[;parameters][?query]#fragment
protocol 通信协议 常用的http,ftp,maito等
hostname 主机(域名)
port 端口号可选,省略时使用方案的默认端口如http的默认端口为80
path 路径由零或多个 ‘/’ 符号隔开的字符串,一般用来表示主机上的一个目录或文件地址
query 参数以键值对的形式,通过&
符号分隔开来
fragment 片段 #后面内容常见于链接 锚点
location对象的属性
lacation对象属性 | 返回值 |
---|---|
location.href | 获取或者设置 整个URL |
location.host | 返回主机 (域名) |
location.port | 返回端口号 如果未写返回空字符串 |
location.pathname | 返回路径 |
location.search | 返回参数 |
location.hash | 返回片段 #后面内容 常见于链接 锚点 |
location对象的方法
location对象的方法 | 返回值 |
---|---|
location.assign() | 跟href一样,可以跳转页面(也称为重定向页面) |
location.replace() | 替换当前页面,因为不记录历史,所以不能后退页面 |
location.reload() | 从新加载页面,相当于刷新按钮或者f5,如果参数为true 强制刷新 ctrl+f5 |
<button>点击</button> <script> let btn = document.querySelector('button'); btn.addEventListener('click', function() { // 记录浏览历史,所以可以实现后退功能 // location.assign('http://www.baidu.cn'); // 不记录浏览历史,所以不可以实现后退功能 // location.replace('http://www.baidu.cn'); location.reload(true); </script>
navigator对象
navigator对象包含有关浏览器的信息,它有很多属性,我们最常用的是userAgent ,该属性可以返回由客户机发送服务器的user-agent头部的值。
判断用户在哪个中断打开页面,实现自动跳转
JSif((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = ""; //手机 }else{ window.location.href = ""; //PC }
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL
history对象方法 | 作用 |
---|---|
history.back() | 可以后退功能 |
history.forward() | 前进功能 |
history.go(参数) | 前进后退功能 参数如果是1前进1个页面 如果是-1后退1个页面 |
这篇关于BOM中 location、navigator、history对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23增量更新怎么做?-icode9专业技术文章分享
- 2024-11-23压缩包加密方案有哪些?-icode9专业技术文章分享
- 2024-11-23用shell怎么写一个开机时自动同步远程仓库的代码?-icode9专业技术文章分享
- 2024-11-23webman可以同步自己的仓库吗?-icode9专业技术文章分享
- 2024-11-23在 Webman 中怎么判断是否有某命令进程正在运行?-icode9专业技术文章分享
- 2024-11-23如何重置new Swiper?-icode9专业技术文章分享
- 2024-11-23oss直传有什么好处?-icode9专业技术文章分享
- 2024-11-23如何将oss直传封装成一个组件在其他页面调用时都可以使用?-icode9专业技术文章分享
- 2024-11-23怎么使用laravel 11在代码里获取路由列表?-icode9专业技术文章分享
- 2024-11-22怎么实现ansible playbook 备份代码中命名包含时间戳功能?-icode9专业技术文章分享