827 阿裏雲技術社區[雲棲]

JavaScript Window

JavaScript Window - 瀏覽器對象模型

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"

瀏覽器對象模型（Browser Object Model (BOM)）尚無正式標準。由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方麵的相同方法和屬性，因此常被認為是 BOM 的方法和屬性

Window 對象

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

 window.document.getElementById("header");

window可以省略

Window 尺寸

有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度

window.innerWidth - 瀏覽器窗口的內部寬度

對於 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

下麵是實用的 JavaScript 方案（涵蓋所有瀏覽器）：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

其他 Window 方法

window.open() - 打開新窗口

window.close() - 關閉當前窗口

window.moveTo() - 移動當前窗口

window.resizeTo() - 調整當前窗口的尺寸

JavaScript Window Screen

window.screen 對象包含有關用戶屏幕的信息

window.screen對象在編寫時可以不使用 window 這個前綴

一些屬性：

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

Window Screen 可用寬度

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界麵特性，比如窗口任務欄

document.write("Available Width: " + screen.availWidth);     //Available Width: 1920

Window Screen 可用高度

screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界麵特性，比如窗口任務欄

document.write("Available Height: " + screen.availHeight);     //Available Height: 1080

JavaScript Window Location

window.location 對象用於獲得當前頁麵的地址 (URL)，並把瀏覽器重定向到新的頁麵

window.location 對象在編寫時可不使用 window 這個前綴。一些例子：

location.hostname 返回 web 主機的域名

location.pathname 返回當前頁麵的路徑和文件名

location.port 返回 web 主機的端口（80 或 443）

location.protocol 返回所使用的 web 協議（https:// 或 https://）

Window Location Href

location.href 屬性返回當前頁麵的 URL

document.write(location.href);

Window Location Pathname

location.pathname 屬性返回 URL 的路徑名

document.write(location.pathname);

Window Location Assign

location.assign() 方法加載新的文檔

<script>
function newDoc(){
    window.location.assign("https://g.wca.com.cn/")
}
</script>
<input type="button" value="加載新文檔/新頁麵" >

JavaScript Window History

window.history 對象包含瀏覽器的曆史

window.history對象在編寫時可不使用 window 這個前綴。為了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限製

一些方法：

history.back() - 與在瀏覽器點擊後退按鈕相同

history.forward() - 與在瀏覽器中點擊按鈕向前相同

Window History Back

history.back() 方法加載曆史列表中的前一個 URL。這與在瀏覽器中點擊後退按鈕是相同的：

<script>
function goBack(){
    window.history.back()
}
</script>
<input type="button" value="Back" >

Window History Forward

history forward() 方法加載曆史列表中的下一個 URL。這與在瀏覽器中點擊前進按鈕是相同的：

<script>
function goForward(){
    window.history.forward()
}
</script>
<input type="button" value="Back" >

JavaScript Window Navigator

window.navigator 對象包含有關訪問者瀏覽器的信息。window.navigator 對象在編寫時可不使用 window 這個前綴

document.write("<p>瀏覽器代號: " + navigator.appCodeName + "</p>");
document.write("<p>瀏覽器名稱: " + navigator.appName + "</p>");
document.write("<p>瀏覽器版本: " + navigator.appVersion + "</p>");
document.write("<p>啟用Cookies: " + navigator.cookieEnabled + "</p>");
document.write("<p>硬件平台: " + navigator.platform + "</p>");
document.write("<p>用戶代理: " + navigator.userAgent + "</p>");
document.write("<p>用戶代理語言: " + navigator.systemLanguage + "</p>");

警告:

來自 navigator 對象的信息具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：

navigator 數據可被瀏覽器使用者更改

一些瀏覽器對測試站點會識別錯誤

瀏覽器無法報告晚於瀏覽器發布的新操作係統

瀏覽器檢測

由於 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不同的瀏覽器。由於不同的瀏覽器支持不同的對象，您可以使用對象來檢測瀏覽器。例如，由於隻有 Opera 支持屬性 "window.opera"，您可以據此識別出 Opera。
例子：

if (window.opera) {...some action...}

JavaScript 彈窗

可以在 JavaScript 中創建三種消息框：警告框、確認框、提示框

警告框

警告框經常用於確保用戶可以得到某些信息。當警告框出現後，用戶需要點擊確定按鈕才能繼續進行操作

語法

window.alert("sometext");

舉例：

alert("I am an alert box!");

確認框

確認框通常用於驗證是否接受用戶操作。當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。當你點擊 "確認", 確認框返回 true，如果點擊 "取消", 確認框返回 false。

語法

window.confirm("sometext");

舉例：

alert("I am an alert box!");

提示框

提示框經常用於提示用戶在進入頁麵前輸入某個值。當提示框出現後，用戶需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。如果用戶點擊確認，那麼返回值為輸入的值。如果用戶點擊取消，那麼返回值為 null。

語法

function myFunction(){
    var x;
    var r=confirm("按下按鈕!");
    if (r==true){
        x="你按下了\"確定\"按鈕!";
    }
    else{
        x="你按下了\"取消\"按鈕!";
    }
    document.getElementById("demo").innerHTML=x;
}

舉例：

function myFunction(){
    var x;
    var person=prompt("請輸入你的名字","Harry Potter");
    if (person!=null && person!=""){
        x="你好 " + person + "! 今天感覺如何?";
        document.getElementById("demo").innerHTML=x;
    }
}

此上三種方法均可以不帶上window對象，直接使用alert()/confirm()/prompt()方法

換行

彈窗使用反斜杠 + "n"(\n) 來設置換行

alert("Hellon\nHow are you?");

JavaScript 計時事件

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之後來執行代碼，而不是在函數被調用後立即執行。我們稱之為計時事件

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼

setTimeout() - 暫停指定的毫秒數後執行指定的代碼

注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。

setInterval() 方法

setInterval() 間隔指定的毫秒數不停地執行指定的代碼

語法

window.setInterval("javascript function",milliseconds);

window.setInterval() 方法可以不使用window前綴，直接使用函數setInterval()。

setInterval() 第一個參數是函數（function）。第二個參數間隔的毫秒數(1000 毫秒是一秒)

用setInterval製作時鍾：

var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    console.log(t);
}

如何停止執行?

clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。

語法

window.clearInterval(intervalVariable)

window.clearInterval() 方法可以不使用window前綴，直接使用函數clearInterval()。

要使用 clearInterval() 方法, 在創建計時方法時你必須使用全局變量：

myVar=setInterval("javascript function",milliseconds);

然後你可以使用clearInterval() 方法來停止執行。

關閉上例中的時鍾

function myStopFunction(){
    clearInterval(myVar);
}

setTimeout() 方法

語法

window.setTimeout("javascript 函數",毫秒數);

setTimeout() 方法會返回某個值。在上麵的語句中，值被儲存在某個變量中。假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。第二個參數指示從當前起多少毫秒後執行第一個參數

function myFunction(){
    myVar=setTimeout(function(){console.log("Hello")},3000);
}

如何停止執行?

clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。

語法

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不使用window 前綴。要使用clearTimeout() 方法, 你必須在創建超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);

如果函數還未被執行，你可以使用 clearTimeout() 方法來停止執行函數代碼

例如終止上例：

function myStopFunction(){
    clearTimeout(myVar);
}

JavaScript Cookies

Cookies 用於存儲 web 頁麵的用戶信息

Cookies 是一些數據, 存儲於你電腦上的文本文件中。當 web 服務器向瀏覽器發送 web 頁麵時，在連接關閉後，服務端不會記錄用戶的信息。Cookies 的作用就是用於解決 "如何記錄客戶端的用戶信息":

當用戶訪問 web 頁麵時，他的名字可以記錄在 cookie 中。在用戶下一次訪問該頁麵時，可以在 cookie 中讀取用戶訪問記錄。

Cookies 以名/值對形式存儲，如下所示:

username=John Doe

當瀏覽器從服務器上請求 web 頁麵時，屬於該頁麵的 cookies 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息

使用 JavaScript 創建Cookie

JavaScript 可以使用 document.cookie 屬性來創建、讀取、及刪除 cookies

JavaScript 中，創建 cookie 如下所示：

document.cookie="username=John Doe";

您還可以為 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬於當前頁麵。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; //path表示cookie所在的目錄，asp.net默認為/，就是根目錄。也可以設置其他目錄：/test/,/test/cd/,/test/dd/，cookie隻能讓其path路徑下的頁麵訪問

使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取 cookies：

var x = document.cookie;

注意：document.cookie 將以字符串的方式返回所有的 cookies，類型格式： cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookies 類似於創建 cookies，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

舊的 cookie 將被覆蓋

使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡單。您隻需要設置 expires 參數為以前的時間即可，如下所示:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意：當您刪除時不必指定 cookie 的值

Cookie 字符串

document.cookie 屬性看起來像一個普通的文本字符串，其實它不是

即使您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您重新讀取該 cookie 信息時，cookie 信息是以名/值對的形式展示的

如果您設置了新的 cookie，舊的 cookie 不會被覆蓋。新 cookie 將添加到 document.cookie 中，所以如果您重新讀取document.cookie，您將獲得如下所示的數據：

cookie1=value; cookie2=value;

如果您需要查找一個指定 cookie 值，您必須創建一個JavaScript 函數在 cookie 字符串中查找 cookie 值

JavaScript Cookie 實例

設置 cookie 值的函數

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

以上的函數參數中，cookie 的名稱為 cname，cookie 的值為 cvalue，並設置了 cookie 的過期時間 expires。
該函數設置了 cookie 名、cookie 值、cookie過期時間

獲取 cookie 值的函數

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++){
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
    }
    return "";
}

cookie 名的參數為 cname。創建一個文本變量用於檢索指定 cookie :cname + "="。使用分號來分割 document.cookie 字符串，並將分割後的字符串數組賦值給 ca (ca = document.cookie.split(';'))。循環 ca 數組 (i=0;i<ca.length;i++)，然後讀取數組中的每個值，並去除前後空格 (c=ca[i].trim())。如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。如果沒有找到 cookie, 返回 ""

檢測 cookie 值的函數

function checkCookie(){
    var username=getCookie("username");
    if (username!=""){
        alert("Welcome again " + username);
    }else {
        username = prompt("Please enter your name:","");
        if (username!="" && username!=null){
            setCookie("username",username,365);
        }
    }
}

檢測 cookie 是否創建的函數：如果設置了 cookie，將顯示一個問候信息。如果沒有設置 cookie，將會顯示一個彈窗用於詢問訪問者的名字，並調用 setCookie 函數將訪問者的名字存儲 365 天

最後更新：2017-06-05 21:31:52

JavaScript Window

JavaScript Window - 瀏覽器對象模型

Window 對象

Window 尺寸

其他 Window 方法

JavaScript Window Screen

Window Screen 可用寬度

Window Screen 可用高度

JavaScript Window Location

Window Location Href

Window Location Pathname

Window Location Assign

JavaScript Window History

Window History Back

Window History Forward

JavaScript Window Navigator

瀏覽器檢測

JavaScript 彈窗

警告框

確認框

提示框

換行

JavaScript 計時事件

setInterval() 方法

如何停止執行?

setTimeout() 方法

JavaScript Cookies

使用 JavaScript 創建Cookie

使用 JavaScript 讀取 Cookie

使用 JavaScript 修改 Cookie

使用 JavaScript 刪除 Cookie

Cookie 字符串

JavaScript Cookie 實例

設置 cookie 值的函數

獲取 cookie 值的函數

檢測 cookie 值的函數

上一篇： 阿裏雲使用心得

下一篇： 史上最全編程語言列表，你掌握了哪些？

相關內容

熱門內容

最新內容

上一篇：阿裏雲使用心得

下一篇：史上最全編程語言列表，你掌握了哪些？