欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript中瀏覽器窗口的基本操作總結(jié)

 更新時(shí)間：2016年08月18日 11:09:48   投稿：daisy  
BOM全稱是brower object model(瀏覽器對(duì)象模型)，主要用于管理窗口及窗口間的通訊，其核心對(duì)象是window。說(shuō)窗口，可能并不準(zhǔn)確。因?yàn)?，有的瀏覽器窗口可能包含多個(gè)標(biāo)簽頁(yè)，每個(gè)標(biāo)簽頁(yè)都有自己的window對(duì)象。本文將詳細(xì)介紹這些內(nèi)容，有需要可以參考學(xué)習(xí)。

窗口位置

【1】獲取

　　瀏覽器(firefox不支持)提供了screenLeft和screenTop屬性，分別用于表示窗口相對(duì)于屏幕左邊和上邊的位置

　　在窗口最大化的情況下，運(yùn)行下列代碼時(shí)，各個(gè)瀏覽器返回的值并不相同。chrome返回left:0;top:0。而IE則返回left:0;top:56(若有菜單欄，則返回left:0;top:78)，這是因?yàn)镮E中保存的是從屏幕左邊和上邊到由window對(duì)象表示的頁(yè)面可見(jiàn)區(qū)域的距離。safari則由于自身的bug，返回left:-8;top:-8

//移動(dòng)窗口，會(huì)有數(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都是只讀屬性，修改他們的值，并不會(huì)使得窗口發(fā)生移動(dòng)

　　在窗口最大化的情況下，各個(gè)瀏覽器返回的值依然不相同。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

   兼容

　　獲取窗口位置的兼容寫(xiě)法如下

　　[注意]由于各瀏覽器的實(shí)現(xiàn)不同，無(wú)法在跨瀏覽器條件下取得精確坐標(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】移動(dòng)

　　使用moveTo()和moveBy()方法可以將窗口精確移動(dòng)到一個(gè)新位置，這兩個(gè)方法只有IE瀏覽器支持

　　moveTo()接收兩個(gè)參數(shù)，分別是新位置的x和y坐標(biāo)值

<div id="myDiv">點(diǎn)擊此處</div>
<script>
//將窗口移動(dòng)到(0,0)處
myDiv.onclick = function(){
 window.moveTo(0,100); 
} 
</script>

 　　moveBy()接收兩個(gè)參數(shù)，分別是水平和垂直方向上移動(dòng)像素?cái)?shù)

<div id="myDiv">點(diǎn)擊此處</div>
<script>
//將窗口向下移動(dòng)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屬性用于表示頁(yè)面大小，實(shí)際上等于瀏覽器窗口尺寸大小減去瀏覽器自身邊框及菜單欄、地址欄、狀態(tài)欄等的寬度

　　[注意]由于<iframe>本身也有window屬性，如果頁(yè)面中存在框架，那么框架中的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也可以表示頁(yè)面大小，與innerWidth和innerHeight返回相同的值

　　[注意]類似地，如果訪問(wèn)框架，這兩個(gè)屬性也指向框架的屬性

//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

　　雖然這兩類屬性在電腦端表示同樣的值，在移動(dòng)端卻有不同的用途。innerWidth和innerHeight表示的是視覺(jué)視口，即用戶正在看到的網(wǎng)站的區(qū)域；而document.documentElement.clientWidth和clientHeight表示的是布局視口，指CSS布局的尺寸。

【2】調(diào)整

　　使用resizeTo()和resizeBy()這兩個(gè)方法可以用來(lái)調(diào)整瀏覽器窗口的大小

　　[注意]只有IE和safari瀏覽器支持

　　resizeTo()接收兩個(gè)參數(shù)：瀏覽器窗口的新寬度和新高度

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 //將瀏覽器窗口大小調(diào)整到200,200
 window.resizeTo(200,200);
}
</script>

　　resizeBy()接收兩個(gè)參數(shù)：瀏覽器新窗口與原窗口的寬度和高度之差

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 //將瀏覽器窗口寬度減小100
 window.resizeBy(-100,0);
}
</script>

打開(kāi)窗口

　　window.open()方法可以導(dǎo)航到一個(gè)特定的URL，也可以打開(kāi)一個(gè)新的瀏覽器窗口。這個(gè)方法接收4個(gè)參數(shù)：要加載的URL、窗口目標(biāo)、一個(gè)特性字符串以及一個(gè)表示新頁(yè)面是否取代瀏覽器歷史記錄中當(dāng)前加載頁(yè)面的布爾值

參數(shù)

　　【1】通常只需要傳遞第一個(gè)參數(shù)，默認(rèn)在新窗口打開(kāi)

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 window.open("http://baidu.com");
}
</script>

　　【2】第二個(gè)參數(shù)表示已有窗口或者框架的名稱，或者是_self、_parent、_top、_blank等窗口打開(kāi)方式

<div id="myDiv">點(diǎn)擊此處</div>
<script>
//在當(dāng)前窗口打開(kāi)
myDiv.onclick = function(){
 window.open("http://baidu.com",'_self');
}
</script>

　　【3】第三個(gè)參數(shù)是一個(gè)逗號(hào)分隔的設(shè)置字符串，表示在新窗口中都顯示哪些特性

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 //在新窗口中打開(kāi)高度為500，寬度為500，縱坐標(biāo)為0，橫坐標(biāo)為200的qq網(wǎng)頁(yè)
 window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
} 
</script>

　　【4】第四個(gè)參數(shù)只在第二個(gè)參數(shù)命名的是一個(gè)存在的窗口時(shí)才有用。它是一個(gè)布爾值，聲明了由第一個(gè)參數(shù)指定的URL是應(yīng)用替換掉窗口瀏覽歷史的當(dāng)前條目(true)，還是應(yīng)該在窗口瀏覽歷史中創(chuàng)建一個(gè)新的條目(false)，后者是默認(rèn)的設(shè)置

返回值

　　open()方法的返回值是新窗口的Window對(duì)象

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 w.document.body.innerHTML = '測(cè)試文字';
}
</script>

　　新創(chuàng)建的window對(duì)象有一個(gè)opener屬性，其中保存著打開(kāi)它的原始窗口對(duì)象

<div id="myDiv">點(diǎn)擊此處</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 console.log(w.opener === window);//true
}
</script>

過(guò)濾

　　大部分瀏覽器都有彈出窗口過(guò)濾系統(tǒng)。通常，open()方法只有當(dāng)用戶手動(dòng)單擊按鈕或者鏈接的時(shí)候才會(huì) 調(diào)用。javascript代碼嘗試在瀏覽器初始載入時(shí)開(kāi)啟一個(gè)彈出窗口時(shí)，通常會(huì)失敗。如果被攔截，則返回值是undefined

<div id="myDiv">點(diǎn)擊此處</div>
<script>
var w = window.open();
console.log(w);//undefined
</script>

窗口關(guān)閉

　　就像方法open()打開(kāi)一個(gè)新窗口一樣，方法close()將關(guān)閉一個(gè)窗口。如果已經(jīng)創(chuàng)建了 Window對(duì)象w，可以使用如下的代碼將它關(guān)掉

<div>
 <span id="span1">打開(kāi)窗口</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>

　　新窗口的對(duì)象w還有一個(gè)closed屬性，用于檢測(cè)是否被關(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)用

　　通過(guò)window.open()返回的對(duì)象可以操作新打開(kāi)窗口的開(kāi)閉

<div id="myDiv">打開(kāi)窗口</div>
<script>
 var w = null;
 myDiv.onclick = function(){
  //如果w不存在，即沒(méi)有打開(kāi)新窗口，或新窗口被關(guān)閉
  if(!w){
   w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
   myDiv.innerHTML = '關(guān)閉窗口';
  //如果w存在，說(shuō)明新窗口被打開(kāi)
  }else{
   w.close();
   w = null;
   myDiv.innerHTML = '打開(kāi)窗口';
  }
 }
</script>

總結(jié)

這篇文章主要介紹了JavaScript瀏覽器窗口的基本操作,理解起來(lái)很簡(jiǎn)單，但是非常實(shí)用的功能,希望對(duì)大家日常使用JavaScript能有有所幫助。

相關(guān)文章

最新評(píng)論