关于javascript:爪哇学习笔记浏览器内置对象BOM

JavaScript 概念

• ECMAScript
• DOM
• BOM

什么是 BOM？

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

其次要对象有：

1. window 对象：BOM 的外围，是 js 拜访浏览器的接口，也是 ES 规定的 Global 对象。

2. location 对象：提供读取和操作 URL 信息的属性和办法。即是 window 对象的属性，也是 document 对象的属性。

   document.location === window.location; // returns true

3. navigation 对象：提供无关浏览器的零碎信息。
4. history 对象：用于保留浏览器历史信息。
5. screen 对象：用于获取浏览器窗口及屏幕的宽低等信息。

window 对象

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

window 对象提供对以下内容的拜访：

• 全局属性

  // 地位信息
  window.screenLeft
  window.screenTop
  window.screenX    
  window.screenY    
  // 宽高
  const outerHeight = window.outerHeight;
  const outerWidth = window.outerWidth;
  const innerHeight = window.innerHeight;
  const innerWidth = window.innerWidth;

• 全局办法

  // 地位信息
  moveBy(x,y)
  moveTo(x,y)
  // 宽高
  resizeTo(width, height)
  resizeBy(width, height)
  // 弹窗
  alert()    
  confirm()
  prompt()
  // 定时器
  const timeout = setTimeout(callback, delay); // delay in ms
  const interval = setInterval(callback, delay); // delay in ms
  clearTimeout(timeout);
  clearInterval(interval);
  // 其余
  open()    
  onerror()

location 对象

• location.hash 返回 URL 中 # 之后的字符串，不蕴含#
• location.host
• location.hostname host 蕴含端口，hostname 不蕴含端口
• location.href 返回以后页面的残缺 URL。咱们也能够写入这个属性，从而重定向到新页面。
• location.pathname 返回 hostname 之后的任何内容
• location.port
• location.protocol
• location.search 返回 URL 中 ? 之后的字符串，蕴含?
• location.assign(url) 导航到作为参数传入的 url
• location.replace(url) 与 assign 办法相似，但被替换的站点会从会话历史记录中删除
• location.reload() 这与单击浏览器上的从新加载按钮具备雷同的成果

navigator 对象

• navigator.userAgent
• navigator.language 浏览器首选语言
• navigator.languages 返回用户已知语言的数组，按偏好排序：[“en-GB”, “en-US”, “en”]
• navigator.geolocation 返回设施的地理位置信息，对象类型
• navigator.appName 返回浏览器名称
• navigator.appVersion 返回浏览器版本
• navigator.platform 返回浏览器平台名称

history 对象

• history.length 返回一个整数，示意会话历史记录中的元素数量，包含以后加载的页面，只读
• history.go(integer)
• history.back(integer)
• history.forward(integer)
• history.state 返回在 history 栈顶的任意值的拷贝。通过这种形式能够查看 state 值，不用期待 popstate 事件产生后再查看
• history.pushState(object, title, url) object 为随着状态保留的一个对象，title 为新页面的题目，url 为新的网址
• replaceState(object, title, url) 与 pushState 的惟一区别在于该办法是替换掉 history 栈顶元素

popstate 事件

当流动历史记录条目更改时，将触发 popstate 事件。调用 history.pushState()和 history.replaceState()办法不会触发。而用户点击浏览器的后退 / 后退按钮时会触发，调用 history 对象的 back()、forward()、go()办法时，也会触发。popstate 事件的回调函数的参数为 event 对象，该对象的 state 属性为随状态保留的那个对象。