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

Javascript之BOM(window對(duì)象)詳解

 更新時(shí)間:2016年05月25日 09:44:38   投稿:jingxian  
下面小編就為大家?guī)硪黄狫avascript之BOM(window對(duì)象)詳解。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(瀏覽器對(duì)象模型)才是真正的核心。

BOM的核心對(duì)象是window,它表示瀏覽器的一個(gè)實(shí)例。

在瀏覽器中,window對(duì)象既是JavaScript訪問瀏覽器窗口的一個(gè)接口,又是ECMAScript規(guī)定的Global對(duì)象。也就是說,在網(wǎng)頁中定義的任何一個(gè)變量、對(duì)象和函數(shù)以window作為其Global對(duì)象。

1.全局作用域

既然window對(duì)象扮演著Global對(duì)象,那么所有在全局作用域中聲明的對(duì)象、變量和函數(shù)都會(huì)變成window的屬性和方法。

定義全局變量和在window對(duì)象上定義屬性還是有差別的:全局變量不能通過delete刪除,而在window對(duì)象上定義的屬性則可以。

var age=28; 
window.color="red"; 
//在IE<9是拋出錯(cuò)誤,在其他瀏覽器中都返回false 
delete window.age; 
//在IE<9是拋出錯(cuò)誤,在其他瀏覽器中都返回true 
delete window.color;  //return true 
 
alert(window.age);   //28 
alert(window.color);  //undefined 

在使用var語句添加window屬性時(shí),有一個(gè)名為[[Configurable]]的特性,這個(gè)特性的值被設(shè)置為false,因此這樣定義的屬性不可以通過delete刪除。

在嘗試訪問未聲明的變量會(huì)拋出錯(cuò)誤,但通過查詢window對(duì)象,可以知道某個(gè)可能未聲明的變量是否存在。

//這里拋出錯(cuò)誤,因?yàn)閛ldValue未聲明 
var newValue=oldValue; 
//這里不會(huì)拋出錯(cuò)誤,因?yàn)檫@是一次屬性查詢 
var newValue=window.oldValue   // alert(newValue); //undefined

其實(shí)很多全局JavaScript對(duì)象如localtion和navigator實(shí)際上都是window對(duì)象的屬性。

2.窗口關(guān)系及框架

如果頁面中包含框架,則每個(gè)框架都有自己的window對(duì)象,并保存在frames集合中。

在frame集合中,可以通過數(shù)值索引或框架名來進(jìn)行訪問。

<html> 
<head> 
  <title>Frameset Example</title> 
</head> 
<frameset rows="160,*"> 
  <frame src="frame.htm" name="topFrame"> 
  <frameset cols="50%,50%"> 
    <frame src="anotherframe.htm" name="leftFrame"> 
    <frame src="yetanotherframe.htm" name="rightFrame"> 
  </frameset> 
</frameset> 
</html> 

就這個(gè)例子而言,可以通過window.frames[0]或者window.frames["topFrame"]來引用上方框架。不過最好使用top.frames[0]來訪問框架。

 top對(duì)象始終指向最高(外)層框架,也就是瀏覽器窗口。使用它可以確保在一個(gè)框架中正確地訪問另一個(gè)框架。

與top對(duì)象相對(duì)的還有另一個(gè)window對(duì)象是parent,parent(父)對(duì)象始終指向當(dāng)前框架的直接上層框架。

還有一個(gè)self對(duì)象,它始終指向window,實(shí)際上self與window可以互相使用,引入self對(duì)象的目的就只是為了與top和parent對(duì)象對(duì)應(yīng)起來。

所有的這些對(duì)象,都是window的屬性,可以使用window.parent或window.top使用它們。

3.窗口位置

多數(shù)瀏覽器都提供了screenLeft和screenTop,分別用于表示窗口相對(duì)與屏幕左邊和上邊的位置。FF則在screenX和screenY屬性中提供相同的窗口信息,Safari金額Chorme也同時(shí)支持這兩個(gè)屬性。

使用下面代碼可以跨瀏覽器取得窗口左邊和上邊的位置。

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對(duì)象表示的頁面可見區(qū)域的距離。在Chrome、FF和Safari中,screenY和screenTop中保存的是整個(gè)瀏覽器對(duì)于屏幕的坐標(biāo)值。

最終結(jié)果就是無法在跨瀏覽器條件下取得窗口左邊和上邊的精確坐標(biāo)值。

使用moveTo()和moveBy()方法倒是可以將窗口精確的移動(dòng)到新位置,兩個(gè)方法都接收兩個(gè)參數(shù),moveTo()接收的是x,y軸的坐標(biāo),moveBy()接收的是移動(dòng)的像素。

//將屏幕移動(dòng)到左上方 
moveTo(0,0); 
//將窗口左移50px 
moveBy(-50,0); 

但是,這兩個(gè)方法可能會(huì)被瀏覽器禁用。這兩個(gè)方法也只適用于最外層的window對(duì)象,不適用框架。

4.窗口大小

主流瀏覽器都為確定窗口大小提供了4個(gè)屬性:innerWidth、innerHight、outerWidth和outerHight。

在IE9+、Safari和FF中,outerWidth和outerHight返回的是瀏覽器窗口本身的尺寸(無論從哪個(gè)框架訪問),但在Opera中,這兩個(gè)屬性的值表示頁面視圖容器的大小(單個(gè)標(biāo)簽頁窗口的大小)。而innerWidth、innerHight則表示該容器中頁面視圖的大?。p去邊框的寬度)。但在Chrome中,這4個(gè)屬性都表示視口大小而非瀏覽器大小。

IE9之前沒有提供取得瀏覽器窗口尺寸的屬性;不過它通過DOM提供了頁面可視區(qū)域的信息。

在IE、FF、Chrome、Opera和Safari中,document.documentElement.clientWidth和document.documentElement.clientHight中保存著頁面視口信息。在IE6下,要在標(biāo)準(zhǔn)模式下有效。如果是混雜模式就必須通過document.body.clientWidth和document.body.clientHight取得相同信息。Chrome則不分標(biāo)準(zhǔn)模式還是混雜模式。

雖然最終無法確定瀏覽器窗口本身的大小,但卻可以取得頁面視口的大小。

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; 
  } 
} 
 
alert("Width: " + pageWidth); 
alert("Height: " + pageHeight); 

對(duì)于移動(dòng)設(shè)備,window.innerWidth和window.innerHight保存著可見視口,也就是屏幕上頁面區(qū)域的大小。移動(dòng)IE瀏覽器則要通過document.documentElement.clientWidth和document.documentElement.clientHight獲取相同信息。

使用resizeTo()和resizeBy()方法都可以調(diào)整瀏覽器窗口大小,兩個(gè)方法都接收兩個(gè)參數(shù),resizeTo()接收的是瀏覽器窗口新寬度和新高度,resizeBy()接收的是新窗口和老窗口的寬度差和高度差。

//調(diào)整到100*100 
resizeTo(100,100); 
//調(diào)整到200*150 
moveBy(100,50); 

但是,這兩個(gè)方法可能會(huì)被瀏覽器禁用。這兩個(gè)方法也只適用于最外層的window對(duì)象,不適用框架。

5.導(dǎo)航和打開窗口

window.open()方法既可以打開一個(gè)特定的URL,也可以打開一個(gè)新的瀏覽器窗口。該方法接收4個(gè)參數(shù):URL,窗口目標(biāo),一個(gè)特性字符串和一個(gè)表示新頁面是否取代當(dāng)前頁面的布爾值。

彈出窗口

各項(xiàng)參數(shù)

其中yes/no也可使用1/0;pixelvalue為具體的數(shù)值,單位象素。

參數(shù)|取值范圍|說明

alwaysLowered|yes/no|指定窗口隱藏在所有窗口之后

alwaysRaised|yes/no|指定窗口懸浮在所有窗口之上

depended|yes/no|是否和父窗口同時(shí)關(guān)閉

directories|yes/no|Nav2和3的目錄欄是否可見

height|pixelvalue|窗口高度

hotkeys|yes/no|在沒菜單欄的窗口中設(shè)安全退出熱鍵

innerHeight|pixelvalue|窗口中文檔的像素高度

innerWidth|pixelvalue|窗口中文檔的像素寬度

location|yes/no|位置欄是否可見

menubar|yes/no|菜單欄是否可見

outerHeight|pixelvalue|設(shè)定窗口(包括裝飾邊框)的像素高度

outerWidth|pixelvalue|設(shè)定窗口(包括裝飾邊框)的像素寬度

resizable|yes/no|窗口大小是否可調(diào)整

screenX|pixelvalue|窗口距屏幕左邊界的像素長(zhǎng)度

screenY|pixelvalue|窗口距屏幕上邊界的像素長(zhǎng)度

scrollbars|yes/no|窗口是否可有滾動(dòng)欄

titlebar|yes/no|窗口題目欄是否可見

toolbar|yes/no|窗口工具欄是否可見

Width|pixelvalue|窗口的像素寬度

z-look|yes/no|窗口被激活后是否浮在其它窗口之上

示例:

window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') 

腳本運(yùn)行后,page.html將在新窗體newwindow中打開,寬為100,高為400,距屏頂0象素,屏左0象素,無工具條,無菜單條,無滾動(dòng)條,不可調(diào)整大小,無地址欄,無狀態(tài)欄。

6.間歇調(diào)用和超時(shí)調(diào)用

JavaScript是單線程語言,但它允許通過設(shè)置超時(shí)值和間歇時(shí)間來調(diào)度代碼在特定時(shí)刻執(zhí)行。前者是在指定的時(shí)間過后執(zhí)行代碼,后者則是每個(gè)指定的時(shí)間就調(diào)用一次。

超時(shí)調(diào)用setTimeout() 
setTimeout() 方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)是函數(shù),第二個(gè)參數(shù)是時(shí)間(單位微秒),返回?cái)?shù)值ID。

setTimeout( function () { 
alert("你好!"); 
},1000); 

調(diào)用setTimeout()后該方法會(huì)返回一個(gè)數(shù)值ID,表示超時(shí)調(diào)用,可以通過它取消超時(shí)調(diào)用。

var timeOutId = setTimeout( function () { 
alert("你好!"); 
},1000); 
 
clearTimeout(timeOutId); 

間歇調(diào)用setInterval() 

setInterval()方法接受兩個(gè)參數(shù),第一個(gè)參數(shù)是函數(shù),第二個(gè)參數(shù)是時(shí)間(單位微秒),返回?cái)?shù)值ID 

setInterval( function () { 
alert("你好!"); 
},1000); 

取消調(diào)用clearInterval(),接受一個(gè)參數(shù)間歇調(diào)用ID 

 

var intervalId = null; 
var span = document.createElement("span"); //創(chuàng)建span節(jié)點(diǎn) 
span.Id="time"; //設(shè)置span的id 
document.body.appendChild(span); //body內(nèi)添加span 
function incrementNumber () { 
var now = new Date(); 
var timeStr = now.toLocaleTimeString(); 
span.innerText =timeStr; 
num++; 
if (num == 10) { 
clearInterval(intervalId); //十秒后時(shí)間不變了 
} 
} 
intervalId = setInterval(incrementNumber,1000); 

盡量用超時(shí)調(diào)用替代間歇調(diào)用 

var num = 0; 
var max = 10; 
function incrementNumber() { 
num++; 
if (num<max) { 
setTimeout(incrementNumber,1000); 
} else { 
alert("OK"); 
} 
} 
setTimeout(incrementNumber,1000); 

7.系統(tǒng)對(duì)話框

警告框alert() 

alert("歡迎光臨!"); 

信息框confirm(),有取消,確定按鈕 

if (confirm("你同意嗎?")) { 
alert("同意"); 
} else { 
alert("不同意"); 
} 

提示框prompt(),用于提示用戶輸入一些文本 

var result = prompt("您尊姓大名?"," "); 
if (result !== null) { 
alert(“歡迎光臨,”+result); 
} 

以上這篇Javascript之BOM(window對(duì)象)詳解就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論