JavaScript 浏览器窗口操作详解：位置、大小、打开与关闭

作者：页面旅途时间：2026-10-30 12:22:25浏览：457

本文详细总结 JavaScript 中浏览器窗口的基本操作，涵盖获取与移动窗口位置、调整窗口大小、使用 open 方法打开新窗口及 close 方法关闭窗口。重点解析各浏览器对 screenLeft、innerWidth 等属性的兼容差异，以及 open 方法参数与弹窗过滤机制。

获取与移动窗口位置

窗口位置

【1】获取

浏览器（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。


//移动窗口，会有数值的变化
<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
 myDiv.innerHTML = 'left:' + window.screenLeft + ';top:' + window.screenTop;
})
myDiv.onclick = function(){
 clearInterval(timer);
}
</script>

结果：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。


<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
 myDiv.innerHTML = 'left:' + window.screenX + ';top:' + window.screenY;
})
myDiv.onclick = function(){
 clearInterval(timer);
}
</script>

结果：left:0;top:93

兼容

获取窗口位置的兼容写法如下。

[注意] 由于各浏览器的实现不同，无法在跨浏览器条件下取得精确坐标值。


 var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
 console.log(leftPos,topPos);

【2】移动

使用 moveTo() 和 moveBy() 方法可以将窗口精确移动到一个新位置，这两个方法只有 IE 浏览器支持。

moveTo() 接收两个参数，分别是新位置的 x 和 y 坐标值。


<div id="myDiv">点击此处</div>
<script>
//将窗口移动到(0,0)处
myDiv.onclick = function(){
 window.moveTo(0,100); 
} 
</script>

moveBy() 接收两个参数，分别是水平和垂直方向上移动像素数。


<div id="myDiv">点击此处</div>
<script>
//将窗口向下移动100像素
myDiv.onclick = function(){
 window.moveBy(0,100); 
} 
</script>

获取与调整窗口大小

窗口大小

【1】获取

outerWidth 和 outerHeight 属性用于表示浏览器窗口本身的尺寸。

[注意] IE8- 浏览器不支持。


//chrome返回outerWidth:1920;outerHeight:1030
//IE9+和firefox返回outerWidth:1550;outerHeight:838 
//safari返回outerWidth:1552;outerHeight:840
document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight

结果：outerWidth:1440;outerHeight:743

innerWidth 和 innerHeight 属性用于表示页面大小，实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度。

[注意] 由于 <iframe> 本身也有 window 属性，如果页面中存在框架，那么框架中的 innerWidth 和 innerHeight 属性指的是框架本身的 innerWidth 和 innerHeight 属性。


//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764
document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight

结果：innerWidth:701;innerHeight:40

DOM 中的 document.documentElement.clientWidth 和 document.documentElement.clientHeight 也可以表示页面大小，与 innerWidth 和 innerHeight 返回相同的值。

[注意] 类似地，如果访问框架，这两个属性也指向框架的属性。


//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764  
document.body.innerHTML = 'clientWidth:' + document.documentElement.clientWidth + ';clientHeight:' + document.documentElement.clientHeight

结果：clientWidth:701;clientHeight:40

虽然这两类属性在电脑端表示同样的值，在移动端却有不同的用途。innerWidth 和 innerHeight 表示的是视觉视口，即用户正在看到的网站的区域；而 document.documentElement.clientWidth 和 clientHeight 表示的是布局视口，指 CSS 布局的尺寸。

【2】调整

使用 resizeTo() 和 resizeBy() 这两个方法可以用来调整浏览器窗口的大小。

[注意] 只有 IE 和 Safari 浏览器支持。

resizeTo() 接收两个参数：浏览器窗口的新宽度和新高度。


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //将浏览器窗口大小调整到200,200
 window.resizeTo(200,200);
}
</script>

resizeBy() 接收两个参数：浏览器新窗口与原窗口的宽度和高度之差。


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //将浏览器窗口宽度减小100
 window.resizeBy(-100,0);
}
</script>

打开与关闭窗口

打开窗口

window.open() 方法可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

参数

【1】通常只需要传递第一个参数，默认在新窗口打开。


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 window.open("http://baidu.com");
}
</script>

【2】第二个参数表示已有窗口或者框架的名称，或者是 _self、_parent、_top、_blank 等窗口打开方式。


<div id="myDiv">点击此处</div>
<script>
//在当前窗口打开
myDiv.onclick = function(){
 window.open("http://baidu.com",'_self');
}
</script>

【3】第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。

获取与移动窗口位置


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //在新窗口中打开高度为500，宽度为500，纵坐标为0，横坐标为200的qq网页
 window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
} 
</script>

【4】第四个参数只在第二个参数命名的是一个存在的窗口时才有用。它是一个布尔值，声明了由第一个参数指定的 URL 是应用替换掉窗口浏览历史的当前条目（true），还是应该在窗口浏览历史中创建一个新的条目（false），后者是默认的设置。

返回值

open() 方法的返回值是新窗口的 Window 对象。


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 w.document.body.innerHTML = '测试文字';
}
</script>

新创建的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。


<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 console.log(w.opener === window);//true
}
</script>

过滤

大部分浏览器都有弹出窗口过滤系统。通常，open() 方法只有当用户手动单击按钮或者链接的时候才会调用。JavaScript 代码尝试在浏览器初始载入时开启一个弹出窗口时，通常会失败。如果被拦截，则返回值是 undefined。


<div id="myDiv">点击此处</div>
<script>
var w = window.open();
console.log(w);//undefined
</script>

窗口关闭

就像方法 open() 打开一个新窗口一样，方法 close() 将关闭一个窗口。如果已经创建了 Window 对象 w，可以使用如下的代码将它关掉。


<div>
 <span id="span1">打开窗口</span>
 <span id="span2">关闭窗口</span> 
</div>
<script>
var w;
span1.onclick = function(){
 w = window.open();
}
span2.onclick = function(){
 if(w){
  w.close();
 }
}
</script>

新窗口的对象 w 还有一个 closed 属性，用于检测是否被关闭。


<div id="myDiv">点击此处</div>
<script>
//先显示false，1s后显示true
myDiv.onclick = function(){
 var w = window.open();
 console.log(w.closed);//false
 setTimeout(function(){
  w.close();
  console.log(w.closed);//true
 },1000);
 
}
</script>

小应用

通过 window.open() 返回的对象可以操作新打开窗口的开闭。


<div id="myDiv">打开窗口</div>
<script>
 var w = null;
 myDiv.onclick = function(){
  //如果w不存在，即没有打开新窗口，或新窗口被关闭
  if(!w){
   w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
   myDiv.innerHTML = '关闭窗口';
  //如果w存在，说明新窗口被打开
  }else{
   w.close();
   w = null;
   myDiv.innerHTML = '打开窗口';
  }
 }
</script>

总结

这篇文章主要介绍了 JavaScript 浏览器窗口的基本操作，理解起来很简单，但是非常实用的功能，希望对大家日常使用 JavaScript 能有有所帮助。

作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54