1、窗口位置:
取得浏览器窗口左边和上边距屏幕左边和上边的位置
var leftPos = (typeof window.screenLeft == "number")? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;
在IE、Opera中,screenLeft 和 screenTop中保存的是屏幕左边和上边到由 window 对象表示的页面可见区域(包含工具栏的高度)的距离。
window 对象有两个移动窗口的方法:
window.moveTo(posX,poxY); 绝对移动
window.moveBy(posX,poxY); 相对移动
这两个方法有可能会被浏览器禁用。
2、窗口大小:
各个浏览器的window对象都有innerWidth、innerHeight、outerWidth、outerHeight属性,但定义有些不同。
可以获取页面视口的大小:
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; if(typeof pageWidth != "number"){ if(document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } }
window对象有两个调整窗口大小的方法:
window.resizeTo(lengthX,lengthY); 绝对调整
window.resizeBy(lengthX,lengthY); 相对调整
这两个方法有可能会被浏览器禁用。
3、导航和打开窗口
使用 window.open() 方法可以导航到一个特定的 URL ,也可以打开一个新的浏览器窗口。
使用格式:
window.open(url [,target [, features[, isReplaceCurrentPageHistory]]]);
参数说明:要加载的URL、窗口目标、个特性字符创、新页面是否取代浏览器历史记录中当前加载页面的布尔值。 通常只需传递第一个参数,最后一个参数只在不打开新窗口时使用。
3.1 导航
// 等同于 <a href="http://www.xxx.com/" target="topFrame"></a>
// topFrame 是frameset框架name 值
window.open("http://www.xxx.com/","topFrame"); //第二个参数也可以: _self, _parent, _top, _blank .默认 _self
3.2 打开新窗口
如果 window.open() 的第二个参数不是一个已经存在的窗口或框架,那么会根据第三个参数,打开一个新窗口或标签页。如果没有第三个参数,那么打开一个默认设置的新窗口或新标签页(根据浏览器设置)。在不打开新窗口时,会忽略第三个参数。
window.open("test.html","topFrame","height=400,width=400, top=20,left=20,resizable=yes"); //存在topFrame框架页面,忽略第三个参数,在topFrame中打开 wroxWin = window.open("test.html","_blank","height=400,width=400, top=20,left=20,resizable=yes"); //打开新窗口, 忽略"_blank",返回新窗口的引用
wroxWin.resizeTo(500,500); // 可以对 window.open()打开的窗口进行 大小调整、位置移动,而主浏览器窗口大多浏览器是不可以的。 wroxWin.moveTo(100,100);
wroxWin.close(); // 还可以关闭窗口,关闭后其引用还在,wroxWin.closed 值为 true
浏览器有可能会屏蔽或者阻止弹出窗口,可能返回 null ,也可能抛出错误。
var blocked = false; try{ var wroxWin = window.open("https://www.baidu.com","_blank"); if(wroxWin == null){ blocked = true; } } catch (ex){ blocked = true; } if(blocked){ console.log("The popup was blocked!"); }
window.open() 的第二个参数选项:
channelmode=yes|no|1|0 | 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 |
directories=yes|no|1|0 | 是否添加目录按钮。默认是肯定的。仅限IE浏览器 |
fullscreen=yes|no|1|0 | 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器 |
height=pixels | 窗口的高度。最小值为100 |
left=pixels | 该窗口的左侧位置 |
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 | 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes |
toolbar=yes|no|1|0 | 是否显示浏览器工具栏.默认值是yes |
top=pixels | 窗口顶部的位置,不能为负 |
width=pixels | 窗口的宽度.最小值为100 |
3.3 新窗口获取焦点
let btnDom = document.querySelector("#btn") let btnDom1 = document.querySelector("#btn1") let winX = null btnDom.onclick = function(e) { winX = window.open("https://www.baidu.com", "_blank") } btnDom1.onclick = function(e) { //console.log(winX) if (winX.parent) { winX.focus() // 手动获取焦点,还可以使用 winX.closed 属性,true 已关闭;false,未关闭 } else { winX = window.open("https://www.baidu.com", "_blank") } }
通过 win.focus() 可以 不必重复打开相同的页面
win.focus() 存在兼容性问题,IE浏览器无效,Chrome,Firefox,Safari等可以使用