window 对象概述
window对象代表的是打开的游览器窗口,通过window对象可以打开窗口或者关闭窗口以及控制窗口的大小和位置,由窗口弹出的对话框,还可以控制窗口上是否显示地址栏,工具栏和状态栏等栏目。对于窗口的内容,window对象可以控制是否重载网页,返回上一个页或者前进到下一页。
在框架方面,window对象可以处理框架与框架之间的关系,并通过这种关系在一个框架中处理另外一个框架中的文档。window对象还是所有其他对象的顶级对象,通过对window对象的子对象进行操作,可以实现更多的动态效果。
window对象作为对象的一种,也有自己的方法和属性。
window 对象的属性
通常在使用window对象时,可以省略前面的window。
History 对象
window.history
属性指向 History
对象,它表示当前窗口的浏览历史。
History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。
window.history.length // 3
由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。
// 后退到前一个网址
history.back()
// 等同于
history.go(-1)
浏览器工具栏的“前进”和“后退”按钮,其实就是对 History
对象进行操作。
History 对象主要有两个属性:
History.length
:加上当前的,一共访问过多少页
History.state
:'页面跳转’中可以传递数据
// 当前窗口访问过多少个网页
window.history.length // 1
// History 对象的当前状态
// 通常是 undefined,即未设置或者null
window.history.state // undefined
History.back()
、History.forward()
、History.go()
这三个方法用于在历史之中移动。
History.back()
:移动到上一个网址,等同于点击浏览器的后退键。对于第一个访问的网址,该方法无效果。
History.forward()
:移动到下一个网址,等同于点击浏览器的前进键。对于最后一个访问的网址,该方法无效果。
History.go()
:接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,
比如go(1)
相当于forward()
,go(-1)
相当于back()
。
如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。
history.back(); //回到上一页
history.forward(); //回到下一页
history.go(-4); //往回退四页
history.go(0); // 刷新当前页面
Location 对象
Location
对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。通过window.location
和document.location
属性,可以拿到这个对象。
Location
对象提供以下等属性:
Location.href
:整个 URL。
Location.protocol
:当前 URL 的协议,包括冒号( :
)。
Location.host
:主机。如果端口不是协议默认的80
和433
,则还会包括冒号( :
)和端口。
Location.hostname
:主机名,不包括端口。
Location.port
:端口号。
Location.pathname
:URL 的路径部分,从根路径/
开始。
Location.search
:查询字符串部分,从问号?
开始。
Location.hash
:片段字符串部分,从#
开始。
Location.username
:域名前面的用户名。
Location.password
:域名前面的密码。
Location.origin
:URL 的协议、主机名和端口。
location -- 当前地址
http://www.aaa.com:2727/a/b/1.html?a=12&b=5#adddd
protocol 协议 http
host 域 www.aaa.com:2727
host 域名 www.aaa.com
href 完整地址 http://www.aaa.com:2727/a/b/1.html?a=12&b=5
pathname 地址 a/b/1.html
search query参数 ?a=12&b=5
hash hash参数 #adddd
这些属性里面,只有origin
属性是只读的,其他属性都可写。
注意,如果对Location.href写入新的 URL 地址,浏览器会立刻跳转到这个新地址。
// 跳转到新网址
document.location.href = 'http://www.example.com';
这个特性常常用于让网页自动滚动到新的锚点。
document.location.href = '#top';
// 等同于
document.location.hash = '#top';
直接改写location
,相当于写入href
属性。
document.location = 'http://www.example.com';
// 等同于
document.location.href = 'http://www.example.com';
另外,Location.href
属性是浏览器唯一允许跨域写入的属性,即非同源的窗口可以改写另一个窗口(比如子窗口与父窗口)的Location.href
属性,导致后者的网址跳转。Location
的其他属性都不允许跨域写入。
open 对象
window.open
方法用于新建另一个浏览器窗口,类似于浏览器菜单的新建窗口选项。
<body>
<button type="button" id="btn1">button</button>
<script>
let btn=document.getElementById('btn1');
btn.onclick=function (){
open('somefile.html','_blank');
}
</script>
</body>
上面代码会让浏览器弹出一个新建窗口,网址是当前域名下的somefile.html
。
open
方法一共可以接受三个参数。
window.open('url', 'windowName', '[windowFeatures]')
1.url
:字符串,表示新窗口的网址。如果省略,默认网址就是about:blank
。
2.windowName
:字符串,表示新窗口的名字。如果该名字的窗口已经存在,则占用该窗口,不再新建窗口。如果省略,就默认使用_blank
,表示新建一个没有名字的窗口。另外还有几个预设值,_self
表示当前窗口,_top
表示顶层窗口,_parent
表示上一层窗口。
3.windowFeatures
:字符串,内容为逗号分隔的键值对,表示新窗口的参数,比如有没有提示栏、工具条等等。如果省略,则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口,则该参数不起作用,浏览器沿用以前窗口的参数。
下面是一个例子
<body>
<button type="button" id="btn1">button</button>
<script>
let btn=document.getElementById('btn1');
btn.onclick=function (){
open(
'https://moshanghua.net',
'_blank',
'height=800,width=1200,location=no,status=yes,resizable=yes,scrollbars=yes');
}
</script>
</body>
上面代码表示,打开的新窗口高度和宽度都为200像素,没有地址栏,但有状态栏和滚动条,允许用户调整大小。
第三个参数可以设定如下属性。

对于那些可以打开和关闭的属性,设为yes
或1
或不设任何值就表示打开,比如status=yes
、status=1
、status
都会得到同样的结果。如果想设为关闭,不用写no
,而是直接省略这个属性即可。也就是说,如果在第三个参数中设置了一部分属性,其他没有被设置的yes / no
属性都会被设成no
,只有titlebar
和关闭按钮除外(它们的值默认为yes)。
上面这些属性,属性名与属性值之间用等号连接,属性与属性之间用逗号分隔。
'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
close 对象
window.close
方法用于关闭当前窗口,一般只用来关闭window.open方法新建的窗口。(用户打开的不行,但Chrome
浏览器可以无视,用户打开的也可以关闭)
该方法只对顶层窗口有效,iframe框架之中的窗口使用该方法无效。
<body>
<button type="button" id="btn1">button</button>
<script>
let btn=document.getElementById('btn1');
btn.onclick=function (){
close();
}
</script>
Navigator 对象
window.navigator
属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。
console.log(navigator);
常用的两个属性Navigator.userAgent
和Navigator.language
navigator.userAgent
属性返回浏览器的 User Agent
字符串,表示浏览器的厂商和版本信息。
下面是 Chrome
浏览器的userAgent
console.log(navigator.userAgent);
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36"
Navigator.language
属性返回一个字符串,表示浏览器的首选语言。该属性只读。
navigator.language // "en"
Navigator.languages
属性返回一个数组,表示用户可以接受的语言。Navigator.language
总是这个数组的第一个成员。HTTP 请求头信息的Accept-Language
字段,就来自这个数组。
navigator.languages // ["en-US", "en", "zh-CN", "zh", "zh-TW"]