JavaScript高级程序设计 第8章 BOM 对象

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript高级程序设计 第8章 BOM 对象，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6011字，纯文字阅读大概需要9分钟。

内容图文

• window 对象同时扮演着 ECMAScript 中的 Global 对象的角色
• 在全局作用域定义的变量和函数，它们会被自动归在 window 对象名下
• 全局变量和 window对象上直接定义的变量的差别是：
  • 全局变量不能通过 delete 删除，因为它的 configurable 为 false
  • window 对象上直接定义的变量可以通过 delete 删除
  • 访问声明的变量会报错，但是访问 window 下未声明的属性不会，因为是通过查询 window 对象下的属性

• 如果页面包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。
• 在 frames 集合中，可以通过数值索引（从 0 开始，从左至由，从上到下）。
• 也可以通过框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。

<frameset rows="160, *"> //?第一个占160像素，第二个自适应占满剩下的全部
??<frame src="./1.html" name="topFrame">
??<frameset cols="50%,50%">
????<frame src="./2.html" name="leftFrame">
????<frame src="./3.html" name="rightFrame">
??</frameset>
</frameset>

• top对象始终指向最高（最外）层的框架，也就是浏览器窗口。其中的 window 对象指向的都是那个框架的特定实例。

• parent对象：parent对象始终指向当前框架的直接上层框架。在某些情况下，parent 有可能等于 top，但在没有框架的情况下 parent 一定等于 top。
• 除非最高层窗口是通过 window.open() 打开的，否则其 window 对象的 name 属性不会包含任何值。

• self 对象。它始终指向 window 

• screenLeft、screenTop
  • 支持浏览器： IE、Safari、Chrome、Opera
• screenX、screenY
  • 支持浏览器：Firefox、Safari、Chrome

const leftPos = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX
const topPos = (typeof window.screenTop === 'number') ? window.screenTop : window.screenY

• Opera、IE 返回的是屏幕距离 页面可视区域的距离（返回的高度会少了浏览器工具栏的像素高度）
• Chrome、Firefox、Safari 返回的是屏幕距离 整个浏览器窗口距离的距离

• moveTo(x, y)：把浏览器窗口移动到 x，y 坐标的位置。
• moveBy(x, y)：把浏览器窗口向左移动 x 的单位，向下移动 y 的单位。

• innerWidth、innerHeight：表示该容器中页面视图的大小（减去边框宽度）
• outerWidth、outerHeight：返回浏览器窗口本身尺寸（每个浏览器返回的值不一样）

let pageWidth = window.innerWidth, // IE8及以上不支持
??pageHeight = window.innerHeight
if (typeof pageWidth !== 'number') {
??if (document.compatMode === 'CSS1Compat') { // 判断页面是否属于标准模式
????pageWidth = document.documentElement.clientWidth
????pageHeight = document.documentElement.clientHeight
??} else {
????clientWidth = document.body.clientWidth
????pageHeight = document.body.clientHeight
??}
}

• 移动设备
  • innerHeight、innerWidth 保存的是可见视口（屏幕上可见页面区域大小）
    • 移动 IE 不支持，只能通过 document.documentElement.clientWidth 访问
• 在其他浏览器中，document.documentElement 保存的是布局视口，即渲染后页面的实际大小
  • 移动 IE 的话保存在 document.body 之中

• window.open() 既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口
  • 参数：
    • URL
    • 打开的窗口目标或 _self、_parent、_top、_blank
    • 以逗号分隔的特性字符串，表示在新窗口都显示哪些特性
    • 是否取代浏览器历史记录中当前页面的布尔值
  • 返回值：返回一个指向新窗口的引用
  • PS：
    • 通过 window.open() 打开的新窗口可以调整大小或移动位置。
    • 新创建的 window 对象有一个 opener 属性，保存这打开它的原始窗口。如果把这个属性设置为 null，则表示不需要与原来的窗口进行通信。一旦切断，将无法恢复。
  • 弹出窗口屏蔽程序：
    • 如果是浏览器窗口内置的屏蔽程序阻止弹出的窗口，那么返回值有可能为null
    • 如果是浏览器插件或其他程序阻止的，window.open() 通常会抛出一个错误。
    • 以下是准确地检测出弹出窗口是否被屏蔽

let blocked = false
try {
??let wroxWin = window.open('https://www.baidu.com', '_black')
??if (wroxWin == null) {
????blocked = true
??}
} catch (e) {
??blocked = true
}

if (blocked)
??console.log('The popup was blocked')

• 超时调用：setTImeout()
• 间歇调用：setInterval()
  • 超时调用和间接调用的第一个参数都是要执行的代码，第二个参数表示告诉 JS 再过多久把当前任务添加到队列中。
  • 返回值是一个 ID(数字)，表示超时调用，这个超时调用 ID 是计划执行代码的唯一标识，可以用它来取消超时调用。可以通过 clearTimeout(ID) 来取消超时调用
  • 在开发中一般很少使用 setInterval 因为间接调用的后一个调用可以在前一个调用之前执行

• 属性：
  • hash（哈希值带#）
  • host（主机名）
  • hostname（带端口主机名）
  • href（链接）
  • pathname（文件路径）
  • port（端口）
  • protocol（协议）
  • search（查询字符串）
• 方法：
  • assign(url)：跳转到url，有历史记录，location.href 底层就是调用这个函数
  • replace(url)：跳转到url，无历史记录
  • reload(boolean)：重新加载当前页面，如果不传 true 有可能从缓存加载，传 true 从服务器重新加载

function getQueryStringArgs() {
? ? var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
? ? args = {},
? ? items = qs.length ? qs.split('&') : [],
? ? item = null, name = null,?value = null
? ??
? ? items.forEach(item => {
?? ?? ? item = item.split('=')
????????name = item[0].decodeURIComponent(item[0])
? ? ? ? value = item[1].decodeURIComponent(item[0])
?? ?? ? if(name.length) {
?? ??? ?? ? args[name] = value
?? ?? ? }
? ? })
? ? return args
}

function hasPlugin(name) {
? ? name = name.toLowerCase()
? ? for (let i = 0; i < navigator.plugins.length; i++) {
?? ?? ? if (navigator.plugins[i].toLowerCase().indexOf(name) >-1)
?? ??? ?? ? return true
? ? }
? ? return false
}

// IE?不支持?Netscape?插件，只能用专有的?ActiveXObject
// IE?中检测插件
function hasIEPlugin(name) {
? ? try {
?? ?? ? new?ActiveXObject(name)
?? ?? ? return true
? ? } catch(e) {
?? ?? ? return false
?? ?}
}

• history.go(1)：前进一页等同于 history.forward()
• history.go(-1)：后退一页等同于 history.back()
• 也可以给 go() 方法传递一个字符串，此时浏览器会跳转到历史记录中包含该字符串的第一个位置（可能前进，也可以后退）
• history.length
  • 保存着历史记录的数量，包括前进和后退的记录，当 length = 0 的时候为第一个打开的页面

内容总结

以上是互联网集市为您收集整理的JavaScript高级程序设计 第8章 BOM 对象全部内容，希望文章能够帮你解决JavaScript高级程序设计 第8章 BOM 对象所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端