JS对象之window

在js中,window表示全局作用域,是一个很重要的对象,但是因为可以省略不写,例如alert('test')等同于window.alert('test'),所以经常被忽略。
下面介绍一下window对象下的一些主要的对象与方法。未特殊提及的表示各个浏览器兼容良好,IE不在考虑范围之内。

对象


  1. window.innerWidth & window.innerHeight
    这两个对象是只读的,表示窗口内可用于显示页面的宽度与高度。

    innerWidth与innerHeight的范围

  2. window.outerWidth & window.outerHeight
    这两个对象是只读的,表示浏览器窗口大小,包括标签栏、地址栏、工具栏、滚动条、状态栏等部分。

    outerWidth与outerHeight的范围

  3. window.screenX & window.screenY
    window.screenLeft & window.screenTop(FF不支持)
    上面这两组对象都是只读的,表示浏览器窗口的左上角到屏幕左上角之间的距离,目前我知道的区别是浏览器兼容性。

    screenX与screenY的值

  4. window.pageXOffset & window.pageYOffset
    window.scrollX & window.scrollY
    这两组对象是等价的并且都是只读的,表示页面内容滚动的距离。
    window.pageXOffset == window.scrollX; // always true

    显示窗口外,已滚动的部分

  5. window.history
    history表示浏览器的浏览记录,可以理解为一个栈。每一次url的变化(包括跳转或者通过锚点跳转)就是一次入栈,后退可以理解为出栈,不过这边的出栈并不是记录就没了,而是保存在栈外的某一个地方,因此还可以前进,不过如果有一次新的入栈,则栈外的纪录丢失。
    出于安全方面的考虑,浏览记录是不允许被代码读取到具体的url的,只能通过索引index在记录之间跳转。
    history提供了一个属性与三个方法:

  • length //栈的大小,只读
  • back() //相当于浏览器的后退
  • forward() //相当于浏览器的前进
  • go() //跳转到栈中的相对于当前的位置,参数为-1、1之类正负整数,如果数字超出范围,则方法无效
  1. window.screen
    screen是一个只读参数,存储着一些关于显示器的数据。
  • width & height // 屏幕的宽 & 高度
  • availWidth & availHeight //屏幕的有效宽&高度(以windows系统为例,为扣除了任务栏的部分)
  1. window.location
    location对象中存储关于当前URL的相关信息。
  • href //完整的URL, 可读写,赋值后跳转
  • origin //协议+端口+域名,只读
  • protocol //协议,只读
  • host //当前端口与域名,只读
  • port //端口,只读
  • hostname //域名,只读
  • pathname //当前页面的路径,只读,例:/newspaper/today.html
  • hash //URL中的锚信息,可读写
  • search //参数(包含?),只读
  • reload() //等同于刷新,参数为true时为强制刷新(刷新缓存)
  • assign() //参数为url地址,表示跳转到制定url
  • replace() //与assign用法一样,区别是新页面不会入栈,而是取代当前页面在栈里的位置,无法通过后退按钮回到原页面
  1. window.document
    document对象应该是最常用的对象之一,表示当前页面的HTML文档,可以用来访问页面内的元素,属性与方法有下。
    部分通用属性与方法具体会在JS对象之Element(还没写)一章中提及。
  • head //表示<head>,可以进行DOM操作
  • title //表示<title>的文本内容,可读写
  • body //表示<body>,可以进行DOM操作
  • cookie //页面的cookie, 可读写
  • inputEncoding //返回页面编码的字符集
  • activeElement() //返回当前focus的元素,默认为body
  • createElement() //创建一个元素,参数为标签名
  • createTextNode() //创建一个文本节点,参数为文本内容
  • getElementById() //通过Id获取一个元素
  • getElementsByClassName() //通过class获取一群元素
  • getElementsByName() //通过name属性获取一群元素
  • getElementsByTagName() //通过标签名获取一群元素
  1. window.navigator
    navigator对象原来是用来存放一些浏览器相关的信息,例如navigator.userAgent,后来又添加的许多属性与对象进来,navigator.connection(网络连接状态)、navigator.battery(电池信息)、navigator.geolocation(定位信息),但是许多新特性都还未成为w3c标准,兼容性并不好(后续补充)。
  • userAgent //存放浏览器信息

方法


  1. window.alert()
    alert()提示框,这个没啥好介绍的

  2. window.setTimeout()
    setTimeout()是一个定时器方法,作用是在一定时间(毫秒)后执行相关代码,return 一个id表示当前定时器。
    eg1: setTimeout(function(){alert(1)}, 5000)//5000毫秒后执行alert(1)
    eg2: setTimeout('alert(1)', 5000)

  3. window.clearTimeout()
    clearTimeout()的作用是取消定时器。
    eg:

var t = setTimeout(function(){alert(1)}, 5000);
clearTimeout(t);
  1. window.setInterval()
    setInterval()可以理解为一个循环定时器(setTimeout),它会按照设定时间段循环执行代码,用法与setTimeout类似。
    eg: setTimeout(function(){alert(1)}, 5000) //每5000毫秒alert(1)

  2. window.clearInterval()
    clearInterval()clearTimeout()效果类似,用于取消setInterval()
    eg:

var t = setInterval(function(){alert(1)}, 5000);
clearInterval(t);
  1. window.open()
    open方法用来打开一个窗口,参数有四个,都是可选的。
    第一个参数:url //字符串,窗口打开的页面
    第二个参数:name //字符串,目前不知道干啥用的
    第三个参数:features //字符串,窗口的一些参数,逗号隔开
    第四个参数:replace //bool, 表示新开窗口是否存入历史纪录
    eg:window.open('https://www.baidu.com/','','width=200,height=200');
    features可选值:
  • channelmode=yes|no|1|0 //是否使用剧院模式显示窗口。默认为 no。
  • directories=yes|no|1|0 //是否添加目录按钮。默认为 yes。
  • fullscreen=yes|no|1|0 //是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
  • height=pixels //窗口文档显示区的高度。以像素计。
  • left=pixels //窗口的 x 坐标。以像素计。
  • location=yes|no|1|0 //是否显示地址字段。默认是 yes。
  • menubar=yes|no|1|0 //是否显示菜单栏。默认是 yes。
  • resizable=yes|no|1|0 //窗口是否可调节尺寸。默认是 yes。
  • scrollbars=yes|no|1|0 //是否显示滚动条。默认是 yes。
  • status=yes|no|1|0 //是否添加状态栏。默认是 yes。
  • titlebar=yes|no|1|0 //是否显示标题栏。默认是 yes。
  • toolbar=yes|no|1|0 //是否显示浏览器的工具栏。默认是 yes。
  • top=pixels //窗口的 y 坐标。
  • width=pixels //窗口的文档显示区的宽度。以像素计。
  1. window.close()
    close()用来关闭open()窗口。
    eg:
var w = window.open('https://www.baidu.com/','','width=200,height=200');
w.close();

目前整理如上,当然不止这些。少的一部分是未成为标准,兼容性不好的,另一部分是我觉得不是那么重要的,还有一部分是我不知道的。欢迎指正补充。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • **1.document.write(""); 输出语句 ****2.JS中的注释为// ****3.传统的HTM...
    reallychao阅读 1,706评论 1 40
  • window对象是客户端JavaScript程序的全局对象,包含多数的属性和方法。 计时器 Window对象包含2...
    kissLife阅读 1,361评论 0 0
  • 如果没有遇见这么一个人,拥有这么好的体验,她也许会将就。 我拒绝了一个小男生的告白,稚嫩男孩的世界非黑即白,表白后...
    心理极客阅读 238评论 0 0
  • 9月份只看了7本书,也不错了,比想象的要多,以为开学了最多只看2、3本呢。其中小说只有两本哦(小说算是阅读速度最快...
    杨宝宝漫谈阅读 333评论 3 3
  • 好像基本只用来展示图片。 属性 动画 其他 1
    居然是村长阅读 459评论 3 1