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


浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model (BOM))尚无正式标准。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。


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 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

尝试一下 »

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)


其他 Window 方法

一些其他方法:

    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window - 浏览器对象模型的更多相关文章

  1. JavaScript | window浏览器对象模型

    Js Window - 获取浏览器窗口 全局变量是window对象的属性 全局函数是window对象的方法 HTML DOM的document是window对象属性之一 window.document ...

  2. Window - 浏览器对象模型

    浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model (BOM))尚无正式标准. 由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因 ...

  3. JavaScript——BOM(浏览器对象模型),时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  4. [TimLinux] JavaScript BOM浏览器对象模型

    1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网 ...

  5. 吴裕雄--天生自然 JAVASCRIPT开发学习:Window - 浏览器对象模型

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. JavaScript浏览器对象模型(BOM)之window对象

    一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象 ...

  7. Javascript高级程序设计——BOM(浏览器对象模型)

    BOM(浏览器对象模型),它提供了独立于内容而与浏览器窗口进行交互的对象.BOM由一系列相关的对象构成.一.window对象      window对象表示整个浏览器窗口,但不必表示其中包含的内容.W ...

  8. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  9. JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...

随机推荐

  1. 【POJ】3630 Phone List

    静态字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 10005 ...

  2. 警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to

    警告: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 警告: [SetPro ...

  3. java多线程编程(1) 线程的基本知识

    在前面研究过多线程与进程的区别. 这里在稍微总结一下: 进程:程序动态的一次执行过程. 线程:可以只是程序员的一部分的执行过程 每个进程有多个线程组成,在java程序中,至少两个线程一个是垃圾回收线程 ...

  4. 折腾iPhone的生活——通过设置使iPhone更省电

    入手了iPhone5s,上手感觉iPhone没有过去省电了,可能是iOS7的关系,也有可能是我一直在下应用的关系,但是iPhone5s那1500mA的电池的确是有点真的不那么够用的样子,通过设置来省电 ...

  5. Codeforces Round #100(140~~)

    140 A. New Year Table 题目大意:有一个大圆桌子,半径是R, 然后有n个半径是r的盘子,现在需要把这些盘子摆放在桌子上,并且只能摆放在桌子边缘,但是不能超出桌子的范围....问能放 ...

  6. 使用Python扫描端口情况

    #!/usr/bin/python# -*- coding:utf8 -*-# Python:          2.7.8# Platform:        Windows# Authro:    ...

  7. Python基础知识---字典

    现在在实习期间,好久没用Python了,今天在做Java项目时用的HashMap让我联想到了Python中的字典,就写一些Python字典的知识吧,复习复习. 字典:  key --> valu ...

  8. (转)Google Fonts 的介绍与使用

    转载自“前端笔记”  http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html Google Fonts 是什么?(以下翻译为 ...

  9. cs模式与bs模式

     关于CS(Client-Server)模式和BS(Browser-Server)模式的水很深,盆地自己也认为对此了解不够透彻,但作为手机客户端设计,如果不对CS.BS做一定程度的了解,是很容易出现一 ...

  10. hadoop的wordcount的改动版

    //这个是在原来的基础上改动以后得到的,将当中的分词的根据给换掉了,而且进行词频统计的时候会自己主动的忽略大写和小写 packageorg.apache.hadoop.mapred; importja ...