Javascript中浏览器窗口基本操作总结

窗口位置

[1]收购

浏览器(火狐不支持)提供screenLeft和screenTop属性，分别用于指示窗口相对于屏幕左侧和顶部的位置

当窗口最大化时，运行以下代码时，不同浏览器返回的值是不同的。Chrome返回left:0top:0 .而IE返回left:0Top:56(如果有菜单栏，返回left:0Top:78)，因为从屏幕左侧和顶部到窗口对象表示的页面可见区域的距离保存在IE中。Safari由于自身的bug返回left :-8；top:-8

//移动窗口，数值会有变化。div id=' mydiv '/divscriptvartimer=set interval(function(){ mydiv . innerhtml=' left : ' window . screenleft '；top: ' window.screenTop})mydiv . onclick=function(){ clearInterval(timer)；}/脚本结果：left:0top:93

ScreenX和screenY属性(IE8-)也提供了相同的窗口位置信息

[注意]screenLeft、screenTop、screenX和screenY都是只读属性。修改它们的值不会导致窗口移动

当窗口最大化时，不同浏览器返回的值仍然不同。火狐返回left :-7；top:-7 .Chrome仍然返回left:0top:0 .而IE9无论菜单栏是否显示，总是返回left :-7；top:-7 .Safari由于自身的bug仍然返回left :-8；top:-8

div id=' myDiv '/divscriptvar timer=setInterval(function(){ myDiv . innerhtml=' left : ' window . screenx '；top: ' window.screenY})mydiv . onclick=function(){ clearInterval(timer)；}/脚本结果：left:0top:93

兼容

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

【注意】由于不同浏览器的实现方式不同，跨浏览器条件下无法获得准确的坐标值

var LeftPoS=(window . screenLeft==' number ')？window . screenleft : window . screenx；var TopOS=(window . screenTop的类型=='number ')？window . screentop : window . screeny；console.log(leftPos，TopOS)；[2]移动

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

MoveTo()接收两个参数，即新位置的X和Y坐标值

Div id='myDiv '单击此处/divscript//将窗口移动到(0，0) mydiv。onclick=function () {window。moveto (0，100)；} /scriptmoveBy()接收两个参数，即水平和垂直移动的像素数。

Div id='myDiv '单击此处/divscript//将窗口向下移动100像素myDiv。onclick=function () {window。moveby (0，100)；}/脚本窗口大小

[1]收购

外部宽度和外部高度属性用于表示浏览器窗口本身的大小

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

//chrome返回outerWidth:1920外部高度：1030//IE9和火狐返回外部宽度：1550；外径：838 //safari返回外径：1552；outer height :840 document . body . inner html=' outer width : ' window . outer width '；外窗高度：英尺。外部高度结果：外部宽度：1440；外部高度：743

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

[注意]由于iframe本身有一个窗口属性，如果页面中有框架，框架中的innerWidth和innerHeight属性指的是框架本身的innerWidth和innerHeight属性

//chrome返回innerWidth:1920InnerHeight:971//IE9返回innerWidth:1536InnerHeight:768 //firefox返回innerWidth:1536InnerHeight 3360755//Safari返回innerWidth:1536inner height :764 document . body . inner html=' inner width : ' window . inner width '；内部高度为：英尺的窗户。内部高度结果：内部宽度：701；内高：40

DOM中的document . document element . client width和document . document element . client height也可以表示页面大小，并返回与innerWidth和innerHeight相同的值

[注意]同样，如果访问框架，这两个属性也指向框架的属性

//chrome返回innerWidth:1920InnerHeight:971//IE9返回innerWidth:1536InnerHeight:768 //firefox返回innerWidth:1536InnerHeight 3360755//Safari返回innerWidth:1536innerheight :764 document . body . innerhtml=' client width : ' document . document element . client width '；client height : ' document . document element . client height结果：clientWidth:701客户端高度：40

虽然这两种属性在计算机端代表相同的值，但在移动端却有不同的用途。InnerWidth和innerHeight表示视觉视口，即用户正在查看的网站区域；而document . document element . client width和clientHeight表示布局视口，指的是CSS布局的大小。

[2]调整

ResizeTo()和resizeBy()可用于调整浏览器窗口的大小

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

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

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){//将浏览器窗口大小调整为200，200 window.resizeTo(200，200)；}/script resizeBy()接收两个参数：新浏览器窗口和原始窗口的宽度和高度之差

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){//将浏览器窗口宽度减少100 window.resizeBy(-100，0)；}/script打开窗口

window.open()方法可以导航到特定的网址或打开一个新的浏览器窗口。此方法接收四个参数：要加载的URL、窗口目标、属性字符串和一个布尔值，该值指示新页面是否替换浏览器历史记录中当前加载的页面

参数

[1]通常，只需要传递第一个参数，默认情况下，它会在新窗口中打开

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){ window . open(' http://Baidu.com ')；}/script [2]第二个参数指示现有窗口或框架的名称，或窗口打开模式，如_self、_parent、_top、_blank等。

Div id='myDiv '单击此处/div script//Open my div . onclick=function(){ window . Open(' http://Baidu.com '，' _ self ')在当前窗口中；}/script [3]第三个参数是逗号分隔的设置字符串，它指示哪些功能显示在新窗口中

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){//打开qq网页窗口. open ('http://qq.com '，' _ blank '，' height=500，Width=500，top=0，left=200')}/script [4]第四个参数仅在第二个参数命名现有窗口时有用。它是一个布尔值，说明由第一个参数指定的URL是应该替换窗口浏览历史记录中的当前条目(true)还是应该在窗口浏览历史记录中创建一个新条目(false)，这是默认设置

返回值

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

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){ var w=window . open()；w . document . body . innerHTMl=' test text '；}/script新创建的窗口对象有一个打开器属性，它保存打开它的原始窗口对象

Div id='myDiv '单击此处/divscriptmydiv . onclick=function(){ var w=window . open()；console . log(w . opener===window)；//true }/脚本过滤

大多数浏览器都有弹出窗口过滤系统。通常，open()方法仅在用户手动单击按钮或链接时调用。当浏览器最初加载时，javascript代码试图打开一个弹出窗口时，通常会失败。如果被截获，返回值是未定义的

Div id='myDiv '单击此处/div script var w=window . open()；console . log(w)；//未定义/脚本窗口关闭

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

Div span id='span1 '打开窗口/span span id='span2 '关闭窗口/span/div script var w；span 1 . onclick=function(){ w=window . open()；} span 2 . onclick=function(){ if(w){ w . close()；}}/script新窗口的对象W也有一个closed属性来检测它是否关闭

Div id='myDiv '单击此处/divscript//先显示false，然后显示true mydiv。onclick=function(){ var w=window . open()；console . log(w . close)；//false setTimeout(函数(){ w . close()；console . log(w . close)；//true }，1000)；}/脚本小程序

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

Div id='myDiv '打开窗口/div script var w=null；MyDiv.onclick=function(){ //如果w不存在，则不会打开或关闭新窗口，如果(！w){ w=window . open(' http://Baidu.com '，' _blank '，'高度=400，宽度=400，顶部=10，左侧=10 ')；MyDiv.innerHTML='关闭窗口'；//如果w存在，则打开新窗口} else { w . close()；w=nullMyDiv.innerHTML='打开窗口'；} }/脚本摘要

本文主要介绍JavaScript浏览器窗口的基本操作，简单易懂，但功能非常实用。希望对大家日常使用JavaScript有所帮助。