Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【红宝书第4版读书笔记】12-BOM #22

Open
yuqingc opened this issue Oct 30, 2020 · 1 comment
Open

【红宝书第4版读书笔记】12-BOM #22

yuqingc opened this issue Oct 30, 2020 · 1 comment
Labels
javascript about JavaScript PJWD4 红宝书第4版读书笔记

Comments

@yuqingc
Copy link
Member

yuqingc commented Oct 30, 2020

12 BOM

Window 对象

全局作用域

  • var 赋值会自动绑定在 window 对象。

  • const 和 let 不会

层级关系

  • 如果窗口在 <iframe> <object> <frame> 中，则会产生层级关系（TODO：<object> 和 <frame> 需要研究一下）

  • top 对象。指向最外层 window

  • parent 对象。指向最临近父 window

  • 最外层的 top 和 parent 相等，都指向 window

  • self 永远指向 window，这个 API 存在就是为了和 top parent 保持一致性

window 位置和 Pixel Ratio

位置

  • window.screenLeft

  • window.screenTop

  • window.moveTo(), window.moveBy() 移动窗口，有些浏览器会禁用

Pixel Ratio

  • window.devicePixelRatio

  • 和显示器分辨率有关，代表 1px 在显示器上实际大小为多小像素

window 大小

  • innerWidth, innerHeight, outerWidth, and outerHeight

  • document.documentElement.clientWidth, document.documentElement.clientHeight

扩展：document.compatMode

  • BackCompat, 文档使用 quirks mode （怪异模式？）渲染。一些上古的不标准的浏览器

  • CSS1Compat，文档使用标准模式渲染

  • 使用 <!DOCTYPE html> 让浏览器使用标准模式

  • XHTML 默认都是用标准模式，无需声明

  • 参考：怪异模式的 Bug：https://developer.mozilla.org/en-US/docs/Mozilla/Mozilla_quirks_mode_behavior

  • 对比

    • document.documentElement.clientHeight/clientWidth

    • document.body.clientHeight/clientWidth

  • 调整窗口大小 window.resizeTo() 一般会被浏览器禁用

Viewport 视窗位置

Viewport 指的是浏览器文档内容可见的区域

  • 便宜位置：以下属性作用用一样

    • window.pageXOffset / window.pageYOffset

    • window.scrollX / window.scrollY

  • 滚动窗口

    • window.scroll() window.scrollBy() 一样，滚动相对距离

    • window.scrollTo()，传入绝对距离

    • 可以传入一个对象

      // normal scroll
window.scrollTo({
  left: 100,
  top: 100, behavior: 'auto'
});
// smooth scroll
window.scrollTo({
  left: 100,
  top: 100, behavior: 'smooth'
});

浏览器导航、打开新窗口

弹窗被拦截

  • window.open() 返回值为空或抛出异常

系统弹窗

  • alert() 这些，是同步执行的，会阻塞线程

Location 对象

  • window.location 和 document.location 指向一个对象

Query 参数

  • 使用 URLSearchParams 工具

操作 Location

  • location.assign() 同 window.location = 和 location.href =

  • 可以设置其他的 location.hash =, location.search = 等等

  • 上述方法都会增加 history 记录

  • location.replace()

  • location.reload() 参数传入 true 强制刷新

Navigator 对象

  • 了解一下 navigator.registerProtocolHandler()

Screen 对象

略

History 对象（重要）

改变页面状态而不刷新页面

  • hashchange 事件

  • HTML5 的 history 对象

  • pushState()

  • replaceState()

  • popstate 事件

    • 按下返回按钮时会触发

    • event.state 为 pushState() 传入的 state 对象

  • history.state 获取当前 state

  • state 对象只能传入可以被序列化的对象。DOM 这类不可序列化的对象不可传入
@yuqingc yuqingc added javascript about JavaScript PJWD4 红宝书第4版读书笔记 labels Oct 30, 2020
@yuqingc
Copy link
Member Author

yuqingc commented Nov 20, 2020

windowow.scroll 的兼容性更好，但是 iOS 只支持传入 x, y 的形式，不支持 options 对象。如果要实现平滑滚动，可以添加 CSS 属性 scroll-behavior: smooth;

@yuqingc yuqingc changed the title 红宝书第4版读书笔记】12-BOM 【红宝书第4版读书笔记】12-BOM Nov 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
javascript about JavaScript PJWD4 红宝书第4版读书笔记
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yuqingc