windwo对象
1全局作用域
因为windiow是Global中的一员,所以在全局作用域中声明的变量、函数都可以通过window的方式获取到(用户声明的变量、函数,都是window对象的属性和方法)。
var age = 29;
function getAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
windwo.sayAge(); //29
这里要注意:windwo.sayAge(),是通过window直接调用的sayAge()方法
2窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,兵器保存在frames集合中。在frames几乎中,可以通过数值索引(从0开始,从左到右、从上到下)或者框架名称来访问响应的window对象。对每个window对象都有一个name属性,其中包含框架的名称。
其实这里说的框架就是frameset。说实话,正常工作中用到这个的地方很少,所以不做详细介绍。
3窗口位置
对于博客上常见的screanLeft、screanTop、screanX、screanY支持大部分主流浏览器。但是在Opera中screanLeft、screanTop属性并不对应。screanX、screanY在不同浏览器中返回的数据也是不一样的。所以说夸浏览器时是无法获取精准坐标的。
使用moveTo()和moveBy()方法可以将窗口精确的移动到一个新的位置:
//将窗口移动到屏幕左上角
window.moveTo(0, 0);
//将窗口乡下移动100px
window.moveBy(0, 100);
//将窗口移动到200,300
window.moveTo(200,300);
//将窗口向左移动50px
window.moveBy(-50, 0);
4窗口大小
跨浏览器获取一个窗口的大小是很困难的。因为innerWidth、innerHeight、outerWidth、outerHeight都不是很兼容。
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.comaptMode == "CSS1Compage"){
pageWidth = documet.documentElement.clientWidth;
pageHeight = dicument.documentElement.clientWidth;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
标准模式下documet.documentElement.clientWidth才生效。如果浏览器处于混杂模式document.body.clientWidth是最好的选择。
resizeTo()和resizeBy()的方式可以调整浏览器窗口的大小。resizeTo()接收浏览器窗口的新宽度和新高度。resizeBy()接受新窗口和原窗口的高度只差。
//调整到100 * 100
window.resizeTo(100, 100);
//调整到200 * 150
window.resizeBy(100, 50);
5导航和打开窗口
window.open可以接收以下参数
key | value | 说明 |
---|---|---|
height | 数值 | 新窗口高度,不小于100 |
left | 数值 | 新窗口左坐标,不能小于0 |
top | 数值 | 新窗口上坐标,不能小于0 |
width | 数值 | 新窗口宽度,不能小于100 |
location | yes或no | 是否在浏览器窗口显示地址栏 |
menubar | yes或no | 是否在浏览器窗口显示菜单栏 |
resizable | yes或no | 能否通过拖动浏览器窗口的边框,改变其大小 |
scrollbars | yes或no | 内容展示不下,是否允许滚动 |
status | yes或no | 是否在浏览器窗口显示状态栏 |
left | yes或no | 是否在浏览器窗口显示工具栏 |
6间歇调用和超时调用
JavaScript是单线程语言,但是可以通过设置时间,来控制方法是否执行。
// 1s后执行该方法
setTimeout(function(){
alert("Hello")
}, 1000);
timeoutId =setTimeout(function(){
alert("Hello")
}, 1000);
//通过setTimeout返回的id直接获取到
clearTimeout(timeoutId)
//
还有一个比较常用的方法setInterval()
//每10s执行一次
setInterval (function(){
alert("Hell0");
} ,10000);
7系统对话框
浏览器通过alert()、confirm()、prompt()调用系统对话框向用户显示信息
if (confirm("Are you sure?")){
alert("I'm so glad you're sure!");
} else{
alert("No");
}
var result = prompt("what's your name?","");
if (result != null){
alert("Welcome, " + result)
}
//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();