您好,登錄后才能下訂單哦!
JavaScript Window - 瀏覽器對象模型
瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。
瀏覽器對象模型 (BOM):
瀏覽器對象模型(Browser Object Model (BOM))尚無正式標準。
由于現(xiàn)代瀏覽器已經(jīng)(幾乎)實現(xiàn)了 JavaScript 交互性方面的相同方法和屬性,因此常被認為是 BOM 的方法和屬性。
Window 對象:
所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。
所有 JavaScript 全局對象、函數(shù)以及變量均自動成為 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數(shù)是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一。
語法:window.document.getElementById("header") == document.getElementById("header")
Window 尺寸:
有三種方法能夠確定瀏覽器窗口的尺寸。
http://www.iis7.com/b/wzjk/
對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動條)。
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動條)。
對于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
以下例子顯示瀏覽器窗口的高度和寬度:(不包括工具欄/滾動條)
<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="瀏覽器window寬度: " + w + ", 高度: " + h + "。"
</script>
其他 Window 方法:
window.open(),打開新窗口。
window.close(),關(guān)閉當前窗口。
window.moveTo(),移動當前窗口。
window.resizeTo(),調(diào)整當前窗口的尺寸。
:
JavaScript Window Screen(屏幕)
window.screen 對象包含有關(guān)用戶屏幕的信息。
window.screen對象在編寫時可以不使用 window 這個前綴,一些屬性:
screen.availWidth,可用的屏幕寬度。
screen.availHeight,可用的屏幕高度。
Window Screen 可用寬度:
screen.availWidth 屬性返回訪問者屏幕的寬度,以像素計,減去界面特性,比如窗口任務(wù)欄。
Window Screen 可用高度:
screen.availHeight 屬性返回訪問者屏幕的高度,以像素計,減去界面特性,比如窗口任務(wù)欄。
(screen.width + "" + screen.height),總寬度/高度。
(screen.availWidth + "" + screen.availHeight),可用寬度/高度。
screen.colorDepth,色彩深度。
screen.pixelDepth,色彩分辨率。
:
JavaScript Window Location(地址URL)
window.location 對象用于獲得當前頁面的地址 (URL),并把瀏覽器重定向到新的頁面。
Window Location(地址URL):
window.location 對象在編寫時可不使用 window 這個前綴。 一些例子:
location.hostname,返回 web 主機的域名。
location.pathname,返回當前頁面的路徑和文件名。
location.port 返回,web 主機的端口 (80 或 443)。
location.protocol,返回所使用的 web 協(xié)議(http:// 或 https://)。
location.href,屬性返回當前頁面的 URL。
Window Location Pathname(路徑名):
location.pathname,屬性返回 URL 的路徑名。
Window Location Assign(加載):
location.assign(),方法加載新的文檔。
:
JavaScript Window History(歷史)
window.history 對象包含瀏覽器的歷史。
window.history對象在編寫時可不使用 window 這個前綴。
為了保護用戶隱私,對 JavaScript 訪問該對象的方法做出了限制。
history.back(),與在瀏覽器點擊 "后退" 按鈕相同。
history.forward(),與在瀏覽器中點擊 "向前" 按鈕相同。
(歷史回溯)history.back() 方法加載歷史列表中的前一個 URL,這與在瀏覽器中點擊后退按鈕是相同的。
(歷史前進)history forward() 方法加載歷史列表中的下一個 URL,這與在瀏覽器中點擊前進按鈕是相同的。
:
JavaScript Window Navigator(導航)
window.navigator 對象包含有關(guān)訪問者瀏覽器的信息。
window.navigator 對象在編寫時可不使用 window 這個前綴。
navigator.appCodeName,瀏覽器代號。
navigator.appName,瀏覽器名稱。
navigator.appVersion,瀏覽器版本。
navigator.cookieEnabled,啟用Cookies(信息記錄程序)。
navigator.platform,硬件平臺。
navigator.userAgent,用戶代理。
navigator.systemLanguage, 用戶代理語言。
注意:來自 navigator 對象的信息具有誤導性,不應(yīng)該被用于檢測瀏覽器版本,這是因為:
navigator 數(shù)據(jù)可被瀏覽器使用者更改,一些瀏覽器對測試站點會識別錯誤,瀏覽器無法報告晚于瀏覽器發(fā)布的新操作系統(tǒng)。
瀏覽器檢測:
由于 navigator 可誤導瀏覽器檢測,使用對象檢測可用來嗅探不同的瀏覽器。
由于不同的瀏覽器支持不同的對象,您可以使用對象來檢測瀏覽器。例如,由于只有 Opera 支持屬性 "window.opera",您可以據(jù)此識別出 Opera。
:
JavaScript 彈窗
可以在 JavaScript 中創(chuàng)建三種消息框:"警告框"、"確認框"、"提示框"。
警告框:警告框經(jīng)常用于確保用戶可以得到某些信息,當警告框出現(xiàn)后,用戶需要點擊確定按鈕才能繼續(xù)進行操作。
語法:window.alert("sometext"),window.alert() 方法可以不帶上window對象,直接使用alert()方法。
確認框:確認框通常用于驗證是否接受用戶操作。
當確認卡彈出時,用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
當你點擊 "確認", 確認框返回 true, 點擊 "取消", 確認框返回 false。
語法:window.confirm("sometext"),window.confirm() 方法可以不帶上window對象,直接使用confirm()方法。
提示框:提示框經(jīng)常用于提示用戶在進入頁面前輸入某個值。
當提示框出現(xiàn)后,用戶需要輸入某個值,然后點擊確認或取消按鈕才能繼續(xù)操縱。
如果用戶點擊確認,那么返回值為輸入的值。如果用戶點擊取消,那么返回值為 null。
語法:window.prompt("sometext","defaultvalue(內(nèi)定值)"),window.prompt() 方法可以不帶上window對象,直接使用prompt()方法。
換行:彈窗使用 反斜杠 + "n"(\n) 來設(shè)置換行。
:
JavaScript 計時事件
JavaScript 一個設(shè)定的時間間隔之后來執(zhí)行代碼,我們稱之為 "計時事件"。
JavaScript 計時事件:
通過使用 JavaScript,我們有能力做到在一個設(shè)定的時間間隔之后來執(zhí)行代碼,而不是在函數(shù)被調(diào)用后立即執(zhí)行。我們稱之為計時事件。
在 JavaScritp 中使用計時事件是很容易的,兩個關(guān)鍵方法是:
setInterval(),間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼,間隔毫秒一直循環(huán)下去。
setTimeout(),在指定的毫秒數(shù)后執(zhí)行指定代碼。
注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。
setInterval()方法
語法:window.setInterval("javascript function",(毫秒)milliseconds);
window.setInterval() 方法可以不使用window前綴,直接使用函數(shù)setInterval()。setInterval() 第一個參數(shù)是函數(shù)(function),第二個參數(shù)間隔的毫秒數(shù)。
clearInterval() 方法用于停止 setInterval() 方法執(zhí)行的函數(shù)代碼。
語法:window.clearInterval(intervalVariable)。
window.clearInterval() 方法可以不使用window前綴,直接使用函數(shù)clearInterval()。
要使用 clearInterval("你要停止的東西") 方法, 在創(chuàng)建計時方法時你必須使用全局變量。
setTimeout() 方法
語法:myVar= window.setTimeout("javascript function", (毫秒)milliseconds);
setTimeout() 方法會返回某個值。
setTimeout() 的第一個參數(shù)是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')",或者對函數(shù)的調(diào)用,諸如 alertMsg。
第二個參數(shù)指示從當前起多少毫秒后執(zhí)行第一個參數(shù)。
clearTimeout() 方法用于停止執(zhí)行setTimeout()方法的函數(shù)代碼。
語法:window.clearTimeout(timeoutVariable)。
window.clearTimeout() 方法可以不使用window 前綴。
要使用clearTimeout() 方法, 你必須在創(chuàng)建超時方法中(setTimeout)使用全局變量。
如果函數(shù)還未被執(zhí)行,你可以使用 clearTimeout() 方法來停止執(zhí)行函數(shù)代碼。
注意: 1000 毫秒是一秒。
下列例子是在頁面上顯示一個時鐘:
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>
:
JavaScript Cookie(信息記錄程序)
Cookie 用于存儲 web 頁面的用戶信息。
Cookie 是一些數(shù)據(jù), 存儲于你電腦上的文本文件中。
當 web 服務(wù)器向瀏覽器發(fā)送 web 頁面時,在連接關(guān)閉后,服務(wù)端不會記錄用戶的信息。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":
當用戶訪問 web 頁面時,他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時,可以在 cookie 中讀取用戶訪問記錄。
Cookie 以名/值對形式存儲,如右所示:username=John Doe
當瀏覽器從服務(wù)器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中。服務(wù)端通過這種方式來獲取用戶的信息。
使用 JavaScript 創(chuàng)建Cookie,JavaScript 可以使用 document.cookie 屬性來創(chuàng)建 、讀取、及刪除 cookie。
JavaScript 中,創(chuàng)建 cookie 如右所示:document.cookie="username=John Doe";
您還可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認情況下,cookie 在瀏覽器關(guān)閉時刪除。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認情況下,cookie 屬于當前頁面。
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 讀取 Cookie:
在 JavaScript 中, 可以使用如右所示代碼來讀取 cookie:var x = document.cookie;
document.cookie 將以字符串的方式返回所有的 cookie,類型格式: cookie1=value; cookie2=value; cookie3=value;
使用 JavaScript 修改 Cookie:
在 JavaScript 中,修改 cookie 類似于創(chuàng)建 cookie,如下所示:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/",舊的 cookie 將被覆蓋。
使用 JavaScript 刪除 Cookie:
刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(shù)為以前的時間即可,如下所示,設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
注意,當您刪除時不必指定 cookie 的值。
Cookie 字符串:
document.cookie 屬性看起來像一個普通的文本字符串,其實它不是。
即使您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您重新讀取該 cookie 信息時,cookie 信息是以名/值對的形式展示的。
如果您設(shè)置了新的 cookie,舊的 cookie 不會被覆蓋。 新 cookie 將添加到 document.cookie 中,所以如果您重新讀取document.cookie。
如果您需要查找一個指定 cookie 值,您必須創(chuàng)建一個JavaScript 函數(shù)在 cookie 字符串中查找 cookie 值。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。