JavascriptBOM的核心对象window

Window对象

参考 MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Window

window 对象表示一个包含DOM文档的窗口,其 document 属性指向窗口中载入的 DOM文档 。
使用 document.defaultView 属性可以获取指定文档所在窗口。

window作为全局变量,代表了脚本正在运行的窗口,暴露给 Javascript 代码。

在有标签页功能的浏览器中,每个标签都拥有自己的 window 对象;也就是说,同一个窗口的标签页之间不会共享一个 window 对象。

参考 JavaScript高级程序设计总结

  • BOM的核心对象是window,它表示浏览器的一个实例。

    • 它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。
  • 获取浏览器窗口的(信息)位置: Window的专有属性 DOM没有的

    • screenLeft 和 screenTop 属性,分别用于表示浏览器窗口相对于屏幕左侧和上侧的距离。
    • Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息。


      IE8以后提供的方法有以下
    • outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸
    • innerWidth、innerHeight 返回视口(viewport)大小而非浏览器窗口大小。
    • 这里的视口是可见视口的大小,就是眼睛在浏览器窗口实实在在能看到的内容的大小。 ( 同移动端)

  • 获取DOM专有属性

    • IE8以前没有提供取得当前浏览器窗口尺寸的属性,但是通过DOM提供页面可视区域的相关信息和上面的可见视口获取的值一样 ( 同移动端 )
    • document.documentElement.clientWidth
    • document.documentElement.clientHeight
      在这里插入图片描述

window.setTimeout()

  • 定时器触发线程
    负责执行异步定时器一类的函数的线程,如: setTimeout,setInterval。
    主线程依次执行代码时,遇到定时器,会将定时器交给该线程处理,当计数完毕后,事件触发线程会将计数完毕后的事件加入到任务队列的尾部,等待 JS 引擎线程执行。

  • 定时器的返回值 – 唯一标识 定时器的ID
    调用setTimeout方法后,立即返回id,且这个id是唯一的,这个id就是清除定时器的唯一令牌。

  • 设置超时调用 及取消定时器原理

var timeoutId = setTimeout(function() {
 alert("Hello world!");
}, 1000);
注意:把它取消
clearTimeout(timeoutId); 

只要在指定的时间尚未过去之前调用 clearTimeout(),就可以完全取消超时调用。
这句代码什么也不会执行,因为事件触发线程还未把计数完毕的事件加入到任务队列,就已经把定时器给取消了。
如果指定的时间已经到达,回调函数,已经执行,也是依然可以清除定时器的间歇调用的,
但是无法阻止本次回调函数下面的代码执行,此时必须使用return语句,结束本次间隔调用的代码。

let timerId
let time = 10
timerId = setInterval(() => {
if(time===0) {
  console.log(time)
  clearInterval(timerId)   // 清除定时器的间歇调用
  return  // 阻止下面的代码执行。因为js引擎已经在执行这个代码块了。
}
time--
console.log(time)
},1000)

总之,知道这个特性就行了,代码可以完全不这么写。
定时器这一块涉及到底层浏览器执行js代码部分,进一步学习可以参考 《Javascript忍者秘籍书籍》 事件循环详解。

导航和打开窗口

Window 接口的 open() 方法,是用指定的名称将指定的资源加载到浏览器上下文(窗口 window ,内嵌框架 iframe 或者标签 tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。 window.open(strUrl, strWindowName, [strWindowFeatures]);

使用 window.open()方法既可以导航到一个特定的 URL,也可以打开一个新的浏览器窗口。
这个方法可以接收 4 个参数:

  • 要加载的 URL、要在新打开的窗口中加载的URL。
  • 窗口目标、新窗口的名称。
  • 一个特性字符串 一个可选参数,列出新窗口的特征(大小,位置,滚动条等)作为一个DOMString。

< a href=“http://www.wrox.com” target=“Framename”>
等同于
window.open(“http://www.wrox.com/”, “Framename”);

发布了4 篇原创文章 · 获赞 4 · 访问量 273

猜你喜欢

转载自blog.csdn.net/weixin_44811301/article/details/104029239
今日推荐