window对象

window对象

概述

javascript所有对象都在window这个顶层对象之中。

var a = 1;
window.a // 1

所有未声明就赋值的变量都自动变成window对象的属性。

窗口

  • window.screenX，window.screenY

    • 返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位为像素。

  • window.innerHeight，window.innerWidth

    • 返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。

  • window.outerHeight，window.outerWidth

    • 返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。

  • window.pageXOffset属性，window.pageYOffset属性

    • window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。

  • screen.height、screen.width

    • screen.availHeight和screen.availWidth属性返回屏幕可用的高度和宽度，单位为像素。它们的值为屏幕的实际大小减去操作系统某些功能占据的空间，比如系统的任务栏。

      • screen.colorDepth属性返回屏幕的颜色深度，一般为16（表示16-bit）或24（表示24-bit）。

  • Element.clientHeight:返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

    • clientHeight = height + padding

  • Element.clientWidth: 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

    • clientWidth = width + padding

  • Element.clientLeft:表示一个元素的左边框的宽度

    • clientLeft = border-left-width

  • Element.clientTop:一个元素顶部边框的宽度

    • clientTop = border-top-width

navigator对象

  • navigator.userAgent属性

返回浏览器的User-Agent字符串，用来标示浏览器的种类。

我目前浏览器信息：

mozilla/5.0 (windows nt 10.0; wow64) applewebkit/537.36 (khtml, like gecko) chrome/50.0.2661.94 safari/537.36"

参考：http://javascript.ruanyifeng.com/bom/window.html

浏览器窗体模型:

$(window)： 浏览器显示网页内容的部分

$(document):整个网页文档流

$("body"):就是body

http://www.cnblogs.com/luhe/archive/2012/11/08/2760619.html

BOM对象

window 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口：

window.close();

DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

window下的全局变量:

  • innerHeight/innerWidth：浏览器窗口内部高度/宽度；

  • navigator：包含有关访问者浏览器的信息；

  • screen：访问者屏幕的宽度，以像素计；

  • setTimeout()/clearTimeout()：定时器/取消定时；

  • document.cookie：现在多数网站使用Cookie来识别用户。

  • window.location:对象用于访问当前 URL，或者导航到新的页面。

    • hostname：web 主机的域名

    • pathname：当前页面的路径和文件名

    • port：web 主机的端口

    • protocol：所使用的 web 协议（http:// 或 https://）

    • href：当前url，对它赋值可以实现重定向

    • reload()：这是一个方法，调用后会刷新当前页面

window.history

Window.history保存用户在一个会话期间的网站访问记录，用户每次访问一个新的URL即创建一个新的历史记录。

  • history.back(): 与在浏览器点击后退按钮相同

  • history.forward(): 与在浏览器中点击按钮向前相同

  • history.go(num): 表示向前或向后翻多少页

  • history.pushState(stateObj,title,url)

第一个参数是一个当前的状态对象；第二个是页面标题，但浏览器一般会忽略。第三个是地址参数。

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

在浏览器中运行这段代码，地址栏会变化成***/bar.html，但不会加载页面，window.history.length会增加1。 如果再点击另一个页面，点击返回按钮会加载***/bar.html页面。

history.replaceState(state, title, url)与上面接近，用新的state和URL替换当前的，window.history.length不增加。

window.onpopstate会在浏览器前进或者后退的时候触发，history.pushState()或者history.replaceState()不会触发popstate事件.

https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

PreviousjavascriptNextHTML网页API

Last updated