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

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>

结果：

window 是一个窗口吗? true

语法：

$.isWindow( object )

object：任意类型，需要进行判断的任意值。


摘自：菜鸟教程（http://www.runoob.com/js/js-window.html）

posted on 2018-10-11 15:16  Null指针  阅读(283)  评论(0)  编辑  收藏  举报

导航