JavaScript浏览器模型 | 青训营笔记

LuciaZzzz
70 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第7天 脚本文件尽量都放在网页尾部加载，防止出现“阻塞效应”。 对于外部加载的js，也可以用defer属性，或者用async属性。如果脚本之间有依赖关系，一般用defer，否则用async。

window对象

window对象的方法

  • alert（）：弹出的对话框只有一个确定按钮
  • prompt（）：弹出的对话框有输入以及确定和取消
  • confirm（）：只有确定和取消 这三个方法都有堵塞效应
  • open（）：新建一个窗口
  • close（）
  • stop（）：停止加载
  • moveTo（）
  • moveBy（）
  • resizeTo（）
  • resizeBy（）
  • scrollTo（），scroll（）
  • scrollBy（）
  • print（）
  • focus（）
  • blur（）
  • getComputedStyle（）
  • matchMedia（）
  • requestAnimationFrame（）：跟setTimeout类似
  • requestIdleCallback（）：跟setTimeout类似

事件

  • load
  • onload
  • error
  • onerror

多窗口操作

窗口的引用可以用 top， parent， self等特殊变量，以及用iframe和frames。

Navigator对象

Navigator对象的属性

  • userAgent
  • plugins
  • platform
  • onLine：表示用户是在线还是离线
  • language， languages
  • geolocation： 表示用户的地理位置
  • cookieEnabled：cookie是否打开

Navigator的方法

  • javaEnabled（）
  • sendBeacon（）

Cookie

Cookie属性

  • Expires， Max-Age
  • Domain， Path：Domain指定Cookie属于哪个域名，以后向服务器发送请求时，通过该属性判断是否要附带某个cookie，Path指定向浏览器发送请求时，哪些路径要附带这个Cookie
  • Secure， HTTPOnly： Secure指定浏览器只有在加密协议Https下才能将这个cookie发送到服务器，httponly指该cookie无法通过js脚本拿到。
  • SameSite：用来防治SCRF攻击和用户追踪
  • ducument.cookie:用于读写该网页的cookie，但不能有HTTPOnly属性。

XMLHttpRequest对象

XMLHttpRequest实例属性

  • readyState：返回实例对象的当前状态。0123表示HTTP还在请求中，4表示已经完成。

  • onreadystatechange：指向一个监听函数

  • response：表示服务器返回的数据体

  • responseType

  • responseText

  • responseXML

  • responseURL

  • status， statusText：

    • 200, OK，访问正常
    • 301, Moved Permanently，永久移动
    • 302, Moved temporarily，暂时移动
    • 304, Not Modified，未修改
    • 307, Temporary Redirect，暂时重定向
    • 401, Unauthorized，未授权
    • 403, Forbidden，禁止访问
    • 404, Not Found，未发现指定网址
    • 500, Internal Server Error，服务器发生错误

  • timeout， ontimeout：后者用于设置一个监听函数，如果发生了timeout事件则执行监听函数。

  • withCredentials：表示跨域请求时，用户信息是否会包含在请求中。

  • upload：上传文件

XMLHttpRequest的实例方法

  • open（）：指定HTTP请求的参数。接受method（GET，POST等），url，async，user，password
  • send（）：用于实际发出HTTP请求
  • setRequestHeader（）：设置HTTP请求的头信息。
  • overrideMimeType（）：用来指定MIME类型。
  • getResponseHeader（）：返回头信息指定字段的值
  • getAllResponseHeaders（）
  • abort（）：终止已经发出的HTTP请求

XMLHttpRequest实例的事件

  • readyStateChange
  • progress
  • load， error， abort
  • loadend
  • timeout
  • sendBeacon（）

同源限制

指A网页的cookieB网页不能打开，除非该两网页同源：协议，域名，端口。

avatar
文章
阅读
粉丝