Javascript中瀏覽器窗口的基本操作總結(jié)
窗口位置
【1】獲取
瀏覽器(firefox不支持)提供了screenLeft和screenTop屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置
在窗口最大化的情況下，運(yùn)行下列代碼時，各個瀏覽器返回的值并不相同。chrome返回left:0;top:0。而IE則返回left:0;top:56(若有菜單欄，則返回left:0;top:78)，這是因?yàn)镮E中保存的是從屏幕左邊和上邊到由window對象表示的頁面可見區(qū)域的距離。safari則由于自身的bug，返回left:-8;top:-8
//移動窗口，會有數(shù)值的變化
<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
myDiv.innerHTML = 'left:' + window.screenLeft + ';top:' + window.screenTop;
})
myDiv.onclick = function(){
clearInterval(timer);
}
</script>
結(jié)果：left:0;top:93
screenX和screenY屬性(IE8-)也提供相同的窗口位置信息
[注意]screenLeft、screenTop、screenX和screenY都是只讀屬性，修改他們的值，并不會使得窗口發(fā)生移動
在窗口最大化的情況下，各個瀏覽器返回的值依然不相同。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>
結(jié)果：left:0;top:93
兼容
獲取窗口位置的兼容寫法如下
[注意]由于各瀏覽器的實(shí)現(xiàn)不同，無法在跨瀏覽器條件下取得精確坐標(biāo)值
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()接收兩個參數(shù)，分別是新位置的x和y坐標(biāo)值
<div id="myDiv">點(diǎn)擊此處</div>
<script>
//將窗口移動到(0,0)處
myDiv.onclick = function(){
window.moveTo(0,100);
}
</script>
moveBy()接收兩個參數(shù)，分別是水平和垂直方向上移動像素?cái)?shù)
<div id="myDiv">點(diǎn)擊此處</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
結(jié)果：outerWidth:1440;outerHeight:743
innerWidth和innerHeight屬性用于表示頁面大小，實(shí)際上等于瀏覽器窗口尺寸大小減去瀏覽器自身邊框及菜單欄、地址欄、狀態(tài)欄等的寬度
[注意]由于<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
結(jié)果：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
結(jié)果：clientWidth:701;clientHeight:40
雖然這兩類屬性在電腦端表示同樣的值，在移動端卻有不同的用途。innerWidth和innerHeight表示的是視覺視口，即用戶正在看到的網(wǎng)站的區(qū)域；而document.documentElement.clientWidth和clientHeight表示的是布局視口，指CSS布局的尺寸。
【2】調(diào)整
使用resizeTo()和resizeBy()這兩個方法可以用來調(diào)整瀏覽器窗口的大小
[注意]只有IE和safari瀏覽器支持
resizeTo()接收兩個參數(shù)：瀏覽器窗口的新寬度和新高度
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
//將瀏覽器窗口大小調(diào)整到200,200
window.resizeTo(200,200);
}
</script>
resizeBy()接收兩個參數(shù)：瀏覽器新窗口與原窗口的寬度和高度之差
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
//將瀏覽器窗口寬度減小100
window.resizeBy(-100,0);
}
</script>
打開窗口
window.open()方法可以導(dǎo)航到一個特定的URL，也可以打開一個新的瀏覽器窗口。這個方法接收4個參數(shù)：要加載的URL、窗口目標(biāo)、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值
參數(shù)
【1】通常只需要傳遞第一個參數(shù)，默認(rèn)在新窗口打開
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
window.open("http://baidu.com");
}
</script>
【2】第二個參數(shù)表示已有窗口或者框架的名稱，或者是_self、_parent、_top、_blank等窗口打開方式
<div id="myDiv">點(diǎn)擊此處</div>
<script>
//在當(dāng)前窗口打開
myDiv.onclick = function(){
window.open("http://baidu.com",'_self');
}
</script>
【3】第三個參數(shù)是一個逗號分隔的設(shè)置字符串，表示在新窗口中都顯示哪些特性
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
//在新窗口中打開高度為500，寬度為500，縱坐標(biāo)為0，橫坐標(biāo)為200的qq網(wǎng)頁
window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
}
</script>
【4】第四個參數(shù)只在第二個參數(shù)命名的是一個存在的窗口時才有用。它是一個布爾值，聲明了由第一個參數(shù)指定的URL是應(yīng)用替換掉窗口瀏覽歷史的當(dāng)前條目(true)，還是應(yīng)該在窗口瀏覽歷史中創(chuàng)建一個新的條目(false)，后者是默認(rèn)的設(shè)置
返回值
open()方法的返回值是新窗口的Window對象
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
var w = window.open();
w.document.body.innerHTML = '測試文字';
}
</script>
新創(chuàng)建的window對象有一個opener屬性，其中保存著打開它的原始窗口對象
<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
var w = window.open();
console.log(w.opener === window);//true
}
</script>
過濾
大部分瀏覽器都有彈出窗口過濾系統(tǒng)。通常，open()方法只有當(dāng)用戶手動單擊按鈕或者鏈接的時候才會 調(diào)用。javascript代碼嘗試在瀏覽器初始載入時開啟一個彈出窗口時，通常會失敗。如果被攔截，則返回值是undefined
<div id="myDiv">點(diǎn)擊此處</div> <script> var w = window.open(); console.log(w);//undefined </script>
窗口關(guān)閉
就像方法open()打開一個新窗口一樣，方法close()將關(guān)閉一個窗口。如果已經(jīng)創(chuàng)建了 Window對象w，可以使用如下的代碼將它關(guān)掉
<div>
<span id="span1">打開窗口</span>
<span id="span2">關(guān)閉窗口</span>
</div>
<script>
var w;
span1.onclick = function(){
w = window.open();
}
span2.onclick = function(){
if(w){
w.close();
}
}
</script>
新窗口的對象w還有一個closed屬性，用于檢測是否被關(guān)閉
<div id="myDiv">點(diǎn)擊此處</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>
小應(yīng)用
通過window.open()返回的對象可以操作新打開窗口的開閉
<div id="myDiv">打開窗口</div>
<script>
var w = null;
myDiv.onclick = function(){
//如果w不存在，即沒有打開新窗口，或新窗口被關(guān)閉
if(!w){
w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
myDiv.innerHTML = '關(guān)閉窗口';
//如果w存在，說明新窗口被打開
}else{
w.close();
w = null;
myDiv.innerHTML = '打開窗口';
}
}
</script>
總結(jié)
這篇文章主要介紹了JavaScript瀏覽器窗口的基本操作,理解起來很簡單，但是非常實(shí)用的功能,希望對大家日常使用JavaScript能有有所幫助。
相關(guān)文章
在使用url進(jìn)行參數(shù)傳遞時，經(jīng)常會傳遞一些中文名的參數(shù)或URL地址，在后臺處理時會發(fā)生轉(zhuǎn)換錯誤。2010-04-04
這篇文章主要為大家介紹了輸入npm?run?xxx后執(zhí)行原理深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文通過js和cas代碼分別給大家介紹了移動端判斷手機(jī)橫豎屏狀態(tài)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-07-07
js用正則表達(dá)式來驗(yàn)證表單(比較齊全的資源)
在學(xué)習(xí)網(wǎng)頁中的表單驗(yàn)證，順便學(xué)習(xí)下正則表達(dá)式,在網(wǎng)上找了后發(fā)現(xiàn)了一個比較齊全的資源，稍微進(jìn)行了一下排版，喜歡的朋友可以收藏2013-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)性別單選效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
谷歌瀏覽器不支持showModalDialog模態(tài)對話框的解決方法
谷歌瀏覽器不支持showModalDialog模態(tài)對話框和無法返回returnValue，這個問題，想必很多朋友都有遇到過吧，解決方法很簡單，下面的思路，大家可以看看2014-09-09
KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定
這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流if綁定和ifnot綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10
javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果
這篇文章主要介紹了javascript實(shí)現(xiàn)淘寶幻燈片廣告展示效果的方法,以實(shí)例形式完整講述了javascript實(shí)現(xiàn)幻燈效果的javascript、css及html實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-04-04
在一個js文件里遠(yuǎn)程調(diào)用jquery.js會在ie8下的一個奇怪問題
這樣的腳本你在ie8下調(diào)用，在ie8地址欄下按下回車后調(diào)用jquery的對像、方法什么的沒有問題，但是刷新之后就有問題。就是刷新之后無論怎樣你要在地址欄按一下回車。2010-11-11
這篇文章主要介紹了JS獲取網(wǎng)頁屬性包括寬、高等等,需要的朋友可以參考下2014-04-04