當前位置：首頁 > 运维知识 > windows >内容正文

windows

BOM--window对象

發布時間：2023/12/10 windows 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 BOM--window对象小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

BOM 的核心對象是window，它表示瀏覽器的一個實例。在瀏覽器中，window 對象有雙重角色，它既是通過JavaScript 訪問瀏覽器窗口的一個接口，又是ECMAScript 規定的Global 對象。這意味著在網頁中定義的任何一個對象、變量和函數，都以window 作為其Global 對象，因此有權訪問parseInt()等方法。

1、全局作用域

由于window 對象同時扮演著ECMAScript 中Global 對象的角色，因此所有在全局作用域中聲明的變量、函數都會變成window 對象的屬性和方法。

var age = 29; function sayAge(){alert(this.age); } alert(window.age); //29 sayAge(); //29 window.sayAge(); //29//變量age和函數sayAge()是在全局作用域下定義的，所以被自動歸在了window對象，所以可以通過window.age訪問age，通過widow.sayAge()訪問函數sayAge()

全局變量不能通過delete 操作符刪除，而直接在window 對象上的定義的屬性可以。

var age = 29; window.color = "red";//在IE < 9 時拋出錯誤，在其他所有瀏覽器中都返回false delete window.age;//在IE < 9 時拋出錯誤，在其他所有瀏覽器中都返回true delete window.color; //returns true alert(window.age); //29 alert(window.color); //undefined

剛才使用var 語句添加的window 屬性有一個名為[[Configurable]]的特性，這個特性的值被設置為false，因此這樣定義的屬性不可以通過delete 操作符刪除。IE8及更早版本在遇到使用delete刪除window 屬性的語句時，不管該屬性最初是如何創建的，都會拋出錯誤，以示警告。IE9 及更高版本不會拋出錯誤。

嘗試訪問未聲明的變量會拋出錯誤，但是通過查詢window 對象，可以知道某個可能未聲明的變量是否存在。

//這里會拋出錯誤，因為oldValue 未定義 var newValue = oldValue;//這里不會拋出錯誤，因為這是一次屬性查詢,newValue 的值是undefined var newValue = window.oldValue;

2、窗口關系及框架

如果頁面中包含框架，則每個框架都擁有自己的window 對象，并且保存在frames 集合中。在frames集合中，可以通過數值索引（從0 開始，從左至右，從上到下）或者框架名稱來訪問相應的window 對象。每個window 對象都有一個name 屬性，其中包含框架的名稱。下面是一個包含框架的頁面：

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

以上代碼創建了一個框架集，其中一個框架居上，兩個框架居下。對這個例子而言，可以通過window.frames[0]或者window.frames["topFrame"]來引用上方的框架。不過，恐怕你最好使用top 而非window 來引用這些框架（例如，通過top.frames[0]）。

我們知道，top 對象始終指向最高（最外）層的框架，也就是瀏覽器窗口。使用它可以確保在一個框架中正確地訪問另一個框架。因為對于在一個框架中編寫的任何代碼來說，其中的window 對象指向的都是那個框架的特定實例，而非最高層的框架。圖8-1 展示了在最高層窗口中，通過代碼來訪問前面例子中每個框架的不同方式。

與top 相對的另一個window 對象是parent對象。顧名思義，parent（父）對象始終指向當前框架的直接上層框架。在某些情況下，parent 有可能等于top；但在沒有框架的情況下，parent 一定等于top（此時它們都等于window）。

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

這個框架集中的一個框架包含了另一個框架集，該框架集（anotherframeset.htm）的代碼如下所示。

<html><head><title>Frameset Example</title></head><frameset cols="50%,50%"><frame src="red.htm" name="redFrame"><frame src="blue.htm" name="blueFrame"></frameset> </html>

結果如下：瀏覽器在加載完第一個框架集以后，會繼續將第二個框架集加載到rightFrame 中。如果代碼位于redFrame（或blueFrame）中，那么parent 對象指向的就是rightFrame。可是，如果代碼位于topFrame 中，則parent 指向的是top，因為topFrame 的直接上層框架就是最外層框架。

注意，除非最高層窗口是通過window.open()打開的（本章后面將會討論），否則其window 對象的name 屬性不會包含任何值。
與框架有關的最后一個對象是self對象，它始終指向window；實際上，self 和window 對象可以互換使用。引入self 對象的目的只是為了與top 和parent 對象對應起來，因此它不格外包含其他值。
所有這些對象（top、parent、self）都是window 對象的屬性，可以通過window.parent、window.top 等形式來訪問。同時，這也意味著可以將不同層次的window 對象連綴起來，例如window.parent.parent.frames[0]。

3、窗口位置

用來確定和修改window 對象位置的屬性和方法有很多。IE、Safari、Opera 和Chrome 都提供了screenLeft 和screenTop 屬性，分別用于表示窗口相對于屏幕左邊和上邊的位置。Firefox 則在screenX 和screenY 屬性中提供相同的窗口位置信息，Safari 和Chrome 也同時支持這兩個屬性。Opera雖然也支持screenX 和screenY 屬性，但與screenLeft 和screenTop 屬性并不對應，因此建議大家不要在Opera 中使用它們。使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置。

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;//運用二元操作符首先確定screenLeft 和screenTop 屬性是否存在，如果是（在IE、Safari、Opera 和Chrome 中），則取得這兩個屬性的值。如果不存在（在Firefox 中），則取得screenX和screenY 的值。

在使用這些值的過程中，還必須注意一些小問題。在IE、Opera 中，screenLeft 和screenTop 中保存的是從屏幕左邊和上邊到由window 對象表示的頁面可見區域的距離。換句話說，如果window 對象是最外層對象，而且瀏覽器窗口緊貼屏幕最上端——即y 軸坐標為0，那么screenTop 的值就是位于頁面可見區域上方的瀏覽器工具欄的像素高度。但是，在Chrome、Firefox 和Safari 中，screenY 或screenTop中保存的是整個瀏覽器窗口相對于屏幕的坐標值，即在窗口的y 軸坐標為0 時返回0。

更讓人捉摸不透是，Firefox、Safari 和Chrome 始終返回頁面中每個框架的top.screenX 和top.screenY 值。即使在頁面由于被設置了外邊距而發生偏移的情況下，相對于window 對象使用screenX 和screenY 每次也都會返回相同的值。而IE 和Opera 則會給出框架相對于屏幕邊界的精確坐標值。

最終結果，就是無法在跨瀏覽器的條件下取得窗口左邊和上邊的精確坐標值。然而，使用moveTo()和moveBy()方法倒是有可能將窗口精確地移動到一個新位置。這兩個方法都接收兩個參數，其中moveTo()接收的是新位置的x 和y 坐標值，而moveBy()接收的是在水平和垂直方向上移動的像素數。

//將窗口移動到屏幕左上角 window.moveTo(0,0);//將窗向下移動100 像素 window.moveBy(0,100);//將窗口移動到(200,300) window.moveTo(200,300);//將窗口向左移動50 像素 window.moveBy(-50,0);

需要注意的是，這兩個方法可能會被瀏覽器禁用；而且，在Opera 和IE 7（及更高版本）中默認就是禁用的。另外，這兩個方法都不適用于框架，只能對最外層的window 對象使用。

4、窗口大小

IE9+、Firefox、Safari、Opera 和Chrome 均為此提供了4 個屬性：innerWidth、innerHeight、outerWidth 和outerHeight。在IE9+、Safari 和Firefox中，outerWidth 和outerHeight 返回瀏覽器窗口本身的尺寸（無論是從最外層的window 對象還是從某個框架訪問）。在Opera 中，這兩個屬性的值表示頁面視圖容器（“頁面視圖容器”指的是Opera 中單個標簽頁對應的瀏覽器窗口）的大小。而innerWidth 和innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度）。在Chrome 中，outerWidth、outerHeight、innerWidth、innerHeight 返回相同的值，即視口（viewport）大小而非瀏覽器窗口大小。

IE8 及更早版本沒有提供取得當前瀏覽器窗口尺寸的屬性；不過，它通過DOM 提供了頁面可見區域的相關信息。

在IE、Firefox、Safari、Opera 和Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了頁面視口的信息。在IE6 中，這些屬性必須在標準模式下才有效；如果是混雜模式，就必須通過document.body.clientWidth 和document.body.clientHeight 取得相同信息。而對于混雜模式下的Chrome，則無論通過document.documentElement還是document.body 中的clientWidth 和clientHeight 屬性，都可以取得視口的大小。

在以上代碼中，我們首先將window.innerWidth 和window.innerHeight 的值分別賦給了pageWidth 和pageHeight。然后檢查pageWidth 中保存的是不是一個數值；如果不是，則通過檢查document.compatMode來確定頁面是否處于標準模式。如果是，則分別使用document.documentElement.clientWidth 和document.documentElement.client-Height 的值。否則，就使用document.body.clientWidth 和document.body.clientHeight 的值。

對于移動設備，window.innerWidth 和window.innerHeight 保存著可見視口，也就是屏幕上可見頁面區域的大小。移動IE 瀏覽器不支持這些屬性，但通過document.documentElement.client-Width 和document.documentElement.clientHeihgt 提供了相同的信息。隨著頁面的縮放，這些值也會相應變化。

在其他移動瀏覽器中，document.documentElement 度量的是布局視口，即渲染后頁面的實際大小（與可見視口不同，可見視口只是整個頁面中的一小部分）。移動IE 瀏覽器把布局視口的信息保存在document.body.clientWidth 和document.body.clientHeight 中。這些值不會隨著頁面縮放變化。
由于與桌面瀏覽器間存在這些差異，最好是先檢測一下用戶是否在使用移動設備，然后再決定使用哪個屬性。

另外，使用resizeTo()和resizeBy()方法可以調整瀏覽器窗口的大小。這兩個方法都接收兩個參數，其中resizeTo()接收瀏覽器窗口的新寬度和新高度，而resizeBy()接收新窗口與原窗口的寬度和高度之差。

//調整到100×100 window.resizeTo(100, 100);//調整到200×150 window.resizeBy(100, 50);//調整到 300×300 window.resizeTo(300, 300);

需要注意的是，這兩個方法與移動窗口位置的方法類似，也有可能被瀏覽器禁用；而且，在Opera和IE7（及更高版本）中默認就是禁用的。另外，這兩個方法同樣不適用于框架，而只能對最外層的window 對象使用。

5、導航和打開窗口

使用window.open()方法既可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口。這個方法可以接收4 個參數：要加載的URL、窗口目標、一個特性字符串以及一個表示新頁面是否取代瀏覽器歷史記錄中當前加載頁面的布爾值。通常只須傳遞第一個參數，最后一個參數只在不打開新窗口的情況下使用。

如果為window.open()傳遞了第二個參數，而且該參數是已有窗口或框架的名稱，那么就會在具有該名稱的窗口或框架中加載第一個參數指定的URL。看下面的例子。

//等同于< a href="http://www.wrox.com" target="topFrame"></a> window.open("http://www.wrox.com/", "topFrame");

第二個參數也可以是下列任何一個特殊的窗口名稱：_self(默認)、_parent（在父窗體打開）、_top（在當前窗口打開并替換當前的整個窗體）或_blank（在新窗體打開）。

(1)彈出窗口

如果給window.open()傳遞的第二個參數并不是一個已經存在的窗口或框架，那么該方法就會根據在第三個參數位置上傳入的字符串創建一個新窗口或新標簽頁。如果沒有傳入第三個參數，那么就會打開一個帶有全部默認設置（工具欄、地址欄和狀態欄等）的新瀏覽器窗口（或者打開一個新標簽頁——根據瀏覽器設置）。在不打開新窗口的情況下，會忽略第三個參數。

第三個參數是一個逗號分隔的設置字符串，表示在新窗口中都顯示哪些特性。下表列出了可以出現在這個字符串中的設置選項。

表中所列的部分或全部設置選項，都可以通過逗號分隔的名值對列表來指定。其中，名值對以等號表示（注意，整個特性字符串中不允許出現空格），如下面的例子所示：

window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");

window.open()方法會返回一個指向新窗口的引用。引用的對象與其他window 對象大致相似，但我們可以對其進行更多控制。通過這個返回的對象，可以像操作其他窗口一樣操作新打開的窗口：

var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");//調整大小 wroxWin.resizeTo(500,500);//移動位置 wroxWin.moveTo(100,100);//調用close()方法還可以關閉新打開的窗口。 wroxWin.close();//這個方法僅適用于通過window.open()打開的彈出窗口，對于瀏覽器的主窗口，如果沒有用戶的允許是不能關閉它的。

新創建的window 對象有一個opener 屬性，其中保存著打開它的原始窗口對象。這個屬性只在彈出窗口中的最外層window 對象（top）中有定義，而且指向調用window.open()的窗口或框架。

var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes"); alert(wroxWin.opener == window); //true

雖然彈出窗口中有一個指針指向打開它的原始窗口，但原始窗口中并沒有這樣的指針指向彈出窗口。窗口并不跟蹤記錄它們打開的彈出窗口，因此我們只能在必要的時候自己來手動實現跟蹤。

有些瀏覽器（如IE8 和Chrome）會在獨立的進程中運行每個標簽頁。當一個標簽頁打開另一個標簽頁時，如果兩個window 對象之間需要彼此通信，那么新標簽頁就不能運行在獨立的進程中。在Chrome中，將新創建的標簽頁的opener 屬性設置為null，即表示在單獨的進程中運行新標簽頁

var wroxWin = window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizable=yes"); wroxWin.opener = null; //將opener 屬性設置為null 就是告訴瀏覽器新創建的標簽頁不需要與打開它的標簽頁通信，因此可以在獨立的進程中運行。標簽頁之間的聯系一旦切斷，將沒有辦法恢復。

(2)彈出窗口屏蔽程序

如果是瀏覽器內置的屏蔽程序阻止的彈出窗口，那么window.open()很可能會返回null。此時，只要檢測這個返回的值就可以確定彈出窗口是否被屏蔽了，如下面的例子所示。

var wroxWin = window.open("http://www.wrox.com", "_blank"); if (wroxWin == null){alert("The popup was blocked!"); }

如果是瀏覽器擴展或其他程序阻止的彈出窗口，那么window.open()通常會拋出一個錯誤。因此，要想準確地檢測出彈出窗口是否被屏蔽，必須在檢測返回值的同時，將對window.open()的調用封裝在一個try-catch 塊中，如下所示。

在任何情況下，以上代碼都可以檢測出調用window.open()打開的彈出窗口是不是被屏蔽了。但要注意的是，檢測彈出窗口是否被屏蔽只是一方面，它并不會阻止瀏覽器顯示與被屏蔽的彈出窗口有關的消息。

6、間歇調用和超時調用

JavaScript 是單線程語言，但它允許通過設置超時值（在指定的時間過后執行代碼）和間歇時間值（每隔指定的時間就執行一次代碼）來調度代碼在特定的時刻執行。

超時調用 window 對象的 setTimeout()方法，它接受兩個參數：要執行的代碼和以毫秒表示的時間。其中，第一個參數可以是一個包含JavaScript代碼的字符串（就和在 eval()函數中使用的字符串一樣），也可以是一個函數。例如，下面對 setTimeout() 的兩次調用都會在一秒鐘后顯示一個警告框。

//不建議傳遞字符串！由于傳遞字符串可能導致性能損失，因此不建議以字符串作為第一個參數。 setTimeout("alert('Hello world!') ", 1000);//推薦的調用方式 setTimeout(function() {alert("Hello world!"); }, 1000);

第二個參數是一個表示等待多長時間的毫秒數，但經過該時間后指定的代碼不一定會執行。JavaScript 是一個單線程序的解釋器，因此一定時間內只能執行一段代碼。為了控制要執行的代碼，就有一個JavaScript任務隊列。這些任務會按照將它們添加到隊列的順序執行。setTimeout()的第二個參數告訴JavaScript再過多長時間把當前任務添加到隊列中。如果隊列是空的，那么添加的代碼會立即執行；如果隊列不是空的，那么它就要等前面的代碼執行完了以后再執行。

調用 setTimeout()會返回一個數值 ID，這個超時調用 ID 是計劃執行代碼的唯一標識符，可以通過它來取消超時調用。調用clearTimeout()方法并將相應的超時調用ID作為參數傳遞給它。

//設置超時調用 var timeoutId = setTimeout(function() {alert("Hello world!"); }, 1000);//注意：把它取消 clearTimeout(timeoutId);

注意：超時調用的代碼都是在全局作用域中執行的，因此函數中 this 的值在非嚴格模式下指向 window 對象，在嚴格模式下是 undefined。

間歇調用setInterval()會按照指定的時間間隔重復執行代碼，直至間歇調用被取消或者頁面被卸載。

//不建議傳遞字符串！ setInterval ("alert('Hello world!') ", 10000);//推薦的調用方式 setInterval (function() {alert("Hello world!"); }, 10000);

可以使用 clearInterval()方法來取消間歇調用，和setTimeOut一樣，setInterval()也會返回一個間歇調用ID，該ID可用于在將來某個時刻取消間歇調用。

在開發環境下，很少使用真正的間歇調用，原因是后一個間歇調用可能會在前一個間歇調用結束之前啟動。而使用超時調用，則完全可以避免這一點。所以，最好不要使用間歇調用。

3、系統對話框

alert()、confirm()和 prompt()。

alert()向用戶顯示一個字符串。
confirm除了顯示確定按鈕外，還會顯示一個取消按鈕。為了確定用戶是單擊了 OK 還是 Cancel，可以檢查 confirm()方法返回的布爾值：true 表示單擊了 OK，false 表示單擊了 Cancel 或單擊了右上角的 X 按鈕。 if (confirm("Are you sure?")) {alert("I'm so glad you're sure! "); } else {alert("I'm sorry to hear you're not sure. "); }
prompt()除了顯示 OK 和 Cancel 按鈕之外，還會顯示一個文本輸入域，以供用戶在其中輸入內容。兩個參數：要顯示給用戶的文本提示和文本輸入域的默認值。如果用戶單擊了 OK 按鈕，則 prompt()返回文本輸入域的值；如果用戶單擊了 Cancel 或沒有單擊 OK 而是通過其他方式關閉了對話框，則該方法返回 null。 var result = prompt("What is your name? ", ""); if (result !== null) {alert("Welcome, " + result); }

還有兩個可以通過 JavaScript 打開的對話框，即“查找”和“打印”。這兩個對話框都是異步顯示的，能夠將控制權立即交還給腳本。

//顯示“打印”對話框 window.print(); //顯示“查找”對話框 window.find();

轉載于:https://www.cnblogs.com/lmjZone/p/8004787.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的BOM--window对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：运输问题中产销不平衡问题（表上作业法和L
下一篇：流浪宠物救助网站前端页面_全国爱心人士齐