浏览器相关

清梦-

已于 2022-02-22 17:15:26 修改

阅读量490

点赞数

分类专栏：学习笔记文章标签：前端开发语言

于 2022-02-21 15:35:06 首次发布

本文链接：https://blog.csdn.net/lyh0902/article/details/123047485

版权

学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

addEventListener第三个参数的

什么是浏览器对象模型

BOM：Browser Object Model（浏览器对象模型），浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的API。

其主要对象有：

window对象 —— BOM的核心，是js访问浏览器的接口，也是ES规定的Global对象
local对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是window对象属性，也是document的对象属性
navigation对象：夺取浏览器的系统信息
screen对象：用来表示浏览器窗口外部的显示器的信息等
history对象：保护用户上网的历史信息

window对象

window对象是整个浏览器对象模型的核心，其扮演着既是接口又是全局的角色。

属性	说明
alert()	系统警告对话框，接收字符串参数并显示
confirm()	系统确认对话框，可提示确认或者取消两种事件
prompt()	提示对话框，可对用户展示确认、取消事件外，可提供文本域
open()	可导航至特定的url，又可打开一个新的浏览器窗口 window.open(url, 窗口目标, 一个特定字符串, 一个新页面是否取代浏览器历史记录中当前加载页面的布尔值)
onerror()	事件处理程序，当未捕获的一场传播到调用栈上时就会调用他，并把错误消息输出到浏览器的JavaScript控制上。 window.onerror(描述错误的消息, 字符串--存放引发错误的JavaScript代码所在的文档url, 文档中发生错误的行数)
setTimeout()	超时调用——在指定的时间过后执行代码 window.setTimeout(function(){...}, 毫秒)
setInterval()	间歇调用——每个指定的时间就执行一次 window.setInterval(function(){...}, 毫秒)

窗口位置

属性	说明	兼容性
screenLeft	窗口相对于屏幕左边的位置	适用于IE、Safari、Chrome
screenTop	窗口相对于屏幕上边的位置	适用于IE、Safari、Chrome
screenX	窗口相对于屏幕左边的位置	适用于Firefox
screenY	窗口相对于屏幕上边的位置	适用于Firefox
moveBy(x, y)	接收的是在水平和垂直方向上移动的像素数	全兼容
moveTo(x, y)	接收的是新位置的x和y的坐标值	全兼容

窗口大小

属性	说明
innerWidth innerHeight	IE9+、Safari、Firefox、Opera: 该容器中页面视图区域的大小 Chrome: 返回视口大小移动设备: 返回可见视口（即屏幕上可见页面区域的大小）移动IE浏览器: 不支持该属性，当移动IE浏览器将布局视口的信息保存至 document.body.clientWidth 与 document.body.clientHeight 中
outerWidth outerHeight	IE9+、Safari、Firefox: 返回浏览器窗口本身的尺寸 Opera: 返回页面视图容器的大小 Chrome: 返回视口大小
resizeTo(width, height)	接收浏览器窗口的新宽度与新高度
resizeBy(width, height)	接收新窗口与原窗口的宽度与高度之差

定时器

setTimeout()
serubterval()

问题：如何用 setTimeout 实现 setInterval？

答：使用递归，伪代码简单实现一下，要根据具体使用场景写的严谨一点。

const run = setTimeout(() => {
    run();
}, 1000)

这种方式和 setInterval 还是有区别的
区别：setTimeout 在调用run() 的时候强制等待了，只有等待上一次 run 执行完成后，在它的回调里面执行下一次。而 setInterval 严格意义上，并不会等待上次执行，无论上次执行是否完成，到1秒后，还是会继续执行下一次。

所以：我们在做一些轮巡或者倒计时的时候建议使用 setTimeout，因为我这做这些事情的时候，我们更希望得到一个结果后，在执行下一次。
比如：我们进行http 请求，返回一个状态 status：pending || end，我们更期望请求到一个end的状态去拿某一些信息，而如果是pending的时候我们不去做任何改变，继续执行下一次的轮巡，如果使用setInterval 就会浪费请求。

const run = setTimeout(() => {
    run();
    if(status === 'end') {
        clearTimeout(this.run)
    }
}, 1000)

Location对象

提供当前窗口中的加载的文档有关的信息和一些导航功能。既是window对象属性，也是document的对象属性。

location对象的主要属性：

属性名	例子	说明
hash	#host	返回url中的hash（#后字符>=0）
host	blog.csdn.net:80	服务器名称+端口（如果有）
hostname	blog.csdn.net	只含服务器名称
href	https://blog.csdn.net/lyh0902/article/details/123047485	当前加载页面完整的url
origin	https://blog.csdn.net	包含页面来源的域名的标准形式
pathname	/lyh0902/article/details/123047485	返回url的目录和（或）文件名
port	8080	url的端口号，如果不存在则返回空
portocal	https: or http:	页面使用的协议，最后有一个" : "
search	?name=aha&age=20	返回url的查询字符串，以问号开头

naviagtion接口表示拥护代理的状态和标识，允许脚本查询它和注册自己的一些活动。

History对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，history对象是用窗口的浏览历史用文档和文档状态列表的形式表示。

属性	说明
go()	1、以在用户的历史记录中任意跳转，go(n) 表示前进n页，go(-n)表示后退n页(n>0) 2、go()可以传递字符串参数，浏览器历史中如果有这条url 则实现跳转至包含该字符串的第一个位置，否则什么也不做
back()	后退一页. back() === go(-1)
forword()	前进一页. forword() === go(1)
length	保存历史记录的数量，可用于检测当前页面是否是用户历史记录的第一页(history.length === 0)

详解浏览器事件捕获、冒泡

浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

想了解更加详细内容请点击：详解浏览器事件捕获、冒泡-CSDN博客

addEventListener第三个参数的

这里要注意addEventListenet的第三个参数，如果为true，就是代表在捕获阶段执行，如果是false，就是在冒泡阶段执行。

阻止事件传播

e.stopPropagation()
大家常听到的可能是阻止冒泡，实际上这个方法不只能阻止冒泡，还能阻止捕获阶段的传播。
stopImmediatePropagation()
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。
如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。

阻止默认行为

e.preventDefault()

e.preventDefault() 可以阻止事件的默认行为发生，默认行为是指：点击a标签就是跳转到其他页面、拖拽一个图片到浏览器会被自动打开、点击表单的提交按钮会提交表单等等，因为有时候我们并不希望发生这些事情，所以需要阻止默认行为。

兼容性

attachEvent —— 兼容：IE7、IE8；不支持第三个参数来控制在哪个阶段发生，默认是绑定在冒泡阶段。

addEventListener —— 兼容： firefox、chrome、IE、safari、opera；

事件委托
详解浏览器事件捕获、冒泡-CSDN博客

ajax 以及 fetch API详解

XMLHTTPRequest
fetch

默认不带cookie
错误不会reject
不支持超时设置
需要借用AbortController中止fetch

常见的浏览器请求/响应头/错误吗解析

Request Header

:method: GET
:path:
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
cache-control: no-cache
cookie: deviceId=c12;
origin:
referer:
user-agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1