首页 > 其他分享> 文章详细

BOM中 location、navigator、history对象

2022-04-28 23:33:56 阅读：175 来源： 互联网

标签：返回对象页面 URL location navigator history BOM

location对象

什么是location对象

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

什么是URL

统一资源定位符(Uniform Resource Locator, URL)是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

语法格式：

LANGUAGE-BASH

protocol://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头部的值。

判断用户在哪个中断打开页面，实现自动跳转

if((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个页面

标签：返回,对象,页面,URL,location,navigator,history,BOM
来源： https://www.cnblogs.com/szsy/p/16205013.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9