windwo對(duì)象
1全局作用域
因?yàn)閣indiow是Global中的一員铺根,所以在全局作用域中聲明的變量菠发、函數(shù)都可以通過window的方式獲取到(用戶聲明的變量纳决、函數(shù)凸椿,都是window對(duì)象的屬性和方法)。
var age = 29;
function getAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
windwo.sayAge(); //29
這里要注意:windwo.sayAge()饰抒,是通過window直接調(diào)用的sayAge()方法
2窗口關(guān)系及框架
如果頁(yè)面中包含框架肮砾,則每個(gè)框架都擁有自己的window對(duì)象,兵器保存在frames集合中袋坑。在frames幾乎中仗处,可以通過數(shù)值索引(從0開始,從左到右枣宫、從上到下)或者框架名稱來(lái)訪問響應(yīng)的window對(duì)象婆誓。對(duì)每個(gè)window對(duì)象都有一個(gè)name屬性,其中包含框架的名稱也颤。
其實(shí)這里說的框架就是frameset洋幻。說實(shí)話,正常工作中用到這個(gè)的地方很少翅娶,所以不做詳細(xì)介紹文留。
3窗口位置
對(duì)于博客上常見的screanLeft、screanTop竭沫、screanX燥翅、screanY支持大部分主流瀏覽器。但是在Opera中screanLeft输吏、screanTop屬性并不對(duì)應(yīng)权旷。screanX、screanY在不同瀏覽器中返回的數(shù)據(jù)也是不一樣的贯溅。所以說夸瀏覽器時(shí)是無(wú)法獲取精準(zhǔn)坐標(biāo)的拄氯。
使用moveTo()和moveBy()方法可以將窗口精確的移動(dòng)到一個(gè)新的位置:
//將窗口移動(dòng)到屏幕左上角
window.moveTo(0, 0);
//將窗口鄉(xiāng)下移動(dòng)100px
window.moveBy(0, 100);
//將窗口移動(dòng)到200,300
window.moveTo(200它浅,300);
//將窗口向左移動(dòng)50px
window.moveBy(-50, 0);
4窗口大小
跨瀏覽器獲取一個(gè)窗口的大小是很困難的译柏。因?yàn)閕nnerWidth、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;
}
}
標(biāo)準(zhǔn)模式下documet.documentElement.clientWidth才生效镊折。如果瀏覽器處于混雜模式document.body.clientWidth是最好的選擇胯府。
resizeTo()和resizeBy()的方式可以調(diào)整瀏覽器窗口的大小。resizeTo()接收瀏覽器窗口的新寬度和新高度恨胚。resizeBy()接受新窗口和原窗口的高度只差骂因。
//調(diào)整到100 * 100
window.resizeTo(100, 100);
//調(diào)整到200 * 150
window.resizeBy(100, 50);
5導(dǎo)航和打開窗口
window.open可以接收以下參數(shù)
key | value | 說明 |
---|---|---|
height | 數(shù)值 | 新窗口高度,不小于100 |
left | 數(shù)值 | 新窗口左坐標(biāo)赃泡,不能小于0 |
top | 數(shù)值 | 新窗口上坐標(biāo)寒波,不能小于0 |
width | 數(shù)值 | 新窗口寬度乘盼,不能小于100 |
location | yes或no | 是否在瀏覽器窗口顯示地址欄 |
menubar | yes或no | 是否在瀏覽器窗口顯示菜單欄 |
resizable | yes或no | 能否通過拖動(dòng)瀏覽器窗口的邊框,改變其大小 |
scrollbars | yes或no | 內(nèi)容展示不下俄烁,是否允許滾動(dòng) |
status | yes或no | 是否在瀏覽器窗口顯示狀態(tài)欄 |
left | yes或no | 是否在瀏覽器窗口顯示工具欄 |
6間歇調(diào)用和超時(shí)調(diào)用
JavaScript是單線程語(yǔ)言绸栅,但是可以通過設(shè)置時(shí)間,來(lái)控制方法是否執(zhí)行页屠。
// 1s后執(zhí)行該方法
setTimeout(function(){
alert("Hello")
}, 1000);
timeoutId =setTimeout(function(){
alert("Hello")
}, 1000);
//通過setTimeout返回的id直接獲取到
clearTimeout(timeoutId)
//
還有一個(gè)比較常用的方法setInterval()
//每10s執(zhí)行一次
setInterval (function(){
alert("Hell0");
} ,10000);
7系統(tǒng)對(duì)話框
瀏覽器通過alert()粹胯、confirm()、prompt()調(diào)用系統(tǒng)對(duì)話框向用戶顯示信息
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)
}
//顯示“打印”對(duì)話框
window.print();
//顯示“查找”對(duì)話框
window.find();