专栏首页Golang语言社区JavaScript Window - 浏览器对象模型

JavaScript Window - 浏览器对象模型

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

浏览器对象模型 (BOM)

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

由于现代浏览器已经(几乎)实现了 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() - 调整当前窗口的尺寸

本文分享自微信公众号 - Golang语言社区(Golangweb)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Go语言]从Docker源码学习Go——指针和Structs - lemon_bar

    http://www.cnblogs.com/lemonbar/p/3932981.html 主题 Go语言 Docker function和method关...

    李海彬
  • TCP、UDP、IP 协议分析

    互连网早期的时候,主机间的互连使用的是NCP协议。这种协议本身有很多缺陷,如:不能互连不同的主机,不能互连不同的操作系统,没有纠错功能。为了改善这种缺点,大牛弄...

    李海彬
  • Go语言高阶:调度器系列(1)起源

    如果把语言比喻为武侠小说中的武功,如果只是会用,也就是达到四五层,如果用的熟练也就六七层,如果能见招拆招也得八九层,如果你出神入化,立于不败之地十层。

    李海彬
  • 设置WPF窗体全屏显示:

    //全屏代码: private void Window_Loaded(object sender, RoutedEventArgs e) { // 设...

    hbbliyong
  • JavaScript Window - 浏览器对象模型浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。浏览器对象模型 (Browser Object Model)1 Wi

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

    JavaEdge
  • 写给大忙人看的 Flink Window原理

    Window 可以说是 Flink 中必不可少的 operator 之一,在很多场合都有很非凡的表现。今天呢,我们就一起来看一下 window 是如何实现的。

    shengjk1
  • JavaScript 学习(2)

    参考: http://www.w3cschool.cc/js/js-window.html

    lpe234
  • Window对象的判定方法

    /* window对象的判定,由于ECMA是不规范Host对象,window对象属于Host, 所以也没有约定,所以就算是Object.prototype也对它...

    郑小超.
  • requestAnimationFrame实现动画效果

    html动画一般会采用css3的形式去做,当然也比较建议用css去做动画。但是有时候一些动画只能使用js来完成,常用的js动画方案是使用计时器来完成。编写动画循...

    无邪Z
  • OpenGL-第一个程序-基于GLFW、GL3W

    环境配置教程-> https://blog.csdn.net/jiuzaizuotian2014/article/details/82915917 配置gl...

    祝你万事顺利

扫码关注云+社区

领取腾讯云代金券