学习笔记——浏览器对象模型（Window）

最新推荐文章于 2024-09-25 14:00:00 发布

weixin_33716557

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量79

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5bc6eb166fb9a05d13431021

版权

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

等同于

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <p id="demo"></p>
 6 
 7 <script>
 8 var w=window.innerWidth
 9 || document.documentElement.clientWidth
10 || document.body.clientWidth;
11 
12 var h=window.innerHeight
13 || document.documentElement.clientHeight
14 || document.body.clientHeight;
15 
16 x=document.getElementById("demo");
17 x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
18 </script>
19 
20 </body>
21 </html>
复制代码

结果：

浏览器的内部窗口宽度：705，高度：400。
复制代码

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

jQuery.isWindow()方法：判断传入的参数是否为 window对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>    
 6 <script src="../jquery/1.10.2/jquery.min.js"></script>
 7 </head>
 8 <body>
 9 
10 window 是一个窗口吗? <b></b>
11 <script>
12 $(function () { 
13     $("b").append( "" + $.isWindow(window) );
14 })
15 </script>
16  
17 </body>
18 </html>
复制代码