美文网首页
学习笔记——浏览器对象模型(Window)

学习笔记——浏览器对象模型(Window)

作者: _52Hertz | 来源:发表于2018-10-17 10:19 被阅读3次

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:任意类型,需要进行判断的任意值。

相关文章

  • JS Window

    JavaScript Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能...

  • javascript浏览器对象模型-window对象

    javascript浏览器对象模型-window对象 window对象是BOM(Browser Object Mo...

  • 八、Window - 浏览器对象模型

    Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。 ...

  • JavaScript BOM

    一、Window对象 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 Window...

  • BOM和DOM编程

    BOM(browser object model):浏览器对象模型 浏览器:windows对象 Window 对象...

  • js Window

    js Window 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 ...

  • BOM操作

    Window - 浏览器对象模型 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。浏...

  • JavaScript--BOM对象

    BOM(browser object model)浏览器对象模型 一、window对象 window是浏览器的一个...

  • 16.BOM

    学习要点: 1.window 对象2.location 对象3.history 对象 BOM 也叫浏览器对象模型,...

  • 03-浏览器对象模型和文档对象模型

    一、浏览器对象模型(BOM) 浏览器对象模型主要包括window、history、location和documen...

网友评论

      本文标题:学习笔记——浏览器对象模型(Window)

      本文链接:https://www.haomeiwen.com/subject/mcylzftx.html