Javascript中浏览器窗口的基本操作总结
前端之家收集整理的这篇文章主要介绍了
Javascript中浏览器窗口的基本操作总结,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
窗口位置
浏览器(firefox不支持)提供了screenLeft
和screenTop
属性,分别用于表示窗口相对于屏幕左边和上边的位置
在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同。chrome返回left:0;top:0。而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。safari则由于自身的bug,返回left:-8;top:-8
left:0;top:93
screenX
和screenY
属性(IE8-)也提供相同的窗口位置信息
[注意]screenLeft
、screenTop
、screenX
和screenY
都是只读属性,修改他们的值,并不会使得窗口发生移动
在窗口最大化的情况下,各个浏览器返回的值依然不相同。firefox返回left:-7;top:-7。chrome依然返回left:0;top:0。而IE9+不论是否显示菜单栏始终返回left:-7;top:-7。safari则由于自身的bug,依然返回left:-8;top:-8
结果:
left:0;top:93
兼容
获取窗口位置的兼容写法如下
[注意]由于各浏览器的实现不同,无法在跨浏览器条件下取得精确坐标值
【2】移动
使用moveTo()
和moveBy()
方法可以将窗口精确移动到一个新位置,这两个方法只有IE浏览器支持
moveTo()
接收两个参数,分别是新位置的x和y坐标值
moveBy()
接收两个参数,分别是水平和垂直方向上移动像素数
窗口大小
【1】获取
outerWidth
和outerHeight
属性用于表示浏览器窗口本身的尺寸
[注意]IE8-浏览器不支持
结果:
outerWidth:1440;outerHeight:743
innerWidth
和innerHeight
属性用于表示页面大小,实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度
[注意]由于
结果:
innerWidth:701;innerHeight:40
DOM中的document.documentElement.clientWidth
和document.documentElement.clientHeight
也可以表示页面大小,与innerWidth
和innerHeight
返回相同的值
[注意]类似地,如果访问框架,这两个属性也指向框架的属性
结果:
clientWidth:701;clientHeight:40
虽然这两类属性在电脑端表示同样的值,在移动端却有不同的用途。innerWidth
和innerHeight
表示的是视觉视口,即用户正在看到的网站的区域;而document.documentElement.clientWidth
和clientHeight
表示的是布局视口,指CSS布局的尺寸。
【2】调整
使用resizeTo()
和resizeBy()
这两个方法可以用来调整浏览器窗口的大小
[注意]只有IE和safari浏览器支持
resizeTo()
接收两个参数:浏览器窗口的新宽度和新高度
resizeBy()
接收两个参数:浏览器新窗口与原窗口的宽度和高度之差
打开窗口
window.open()
方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
参数
【1】通常只需要传递第一个参数,默认在新窗口打开
<div class="jb51code">
<pre class="brush:js;">
<div id="myDiv">点击此处