【JS】03 BOM 浏覽器對象模型

BOM ：Broswer Object Model

浏覽器對象模型

核心對象是window對象，window對象又可以操作以下的常見對象：

-　frames[] 視窗對象數組？浏覽器可以打開多個視窗，是以每一個視窗都封裝成了一個視窗對象

-　histroy 曆史記錄對象

-　location 位址對象

-　navigator 導航對象

-　screen 螢幕對象

windows對象是一個涵蓋了非常多其他對象的超級對象

例如我們編寫的JS代碼為什麼可以不需要一個類或者是一個程式最小單元來限制

這是因為這些内容都在window對象之内

但是let聲明的變量則不能被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

JS允許這樣的“相容性”寫法：

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() - 調整目前視窗的尺寸

Screen對象

window.screen 對象包含有關使用者螢幕的資訊。

window.screen對象在編寫時可以不使用 window 這個字首。

屬性：

screen.availWidth - 可用的螢幕寬度
screen.availHeight - 可用的螢幕高度

Location對象

window.location 對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面。

location.hostname 傳回 web 主機的域名
location.pathname 傳回目前頁面的路徑和檔案名
location.port 　　 傳回 web 主機的端口 （80 或 443）
location.protocol 傳回所使用的 web 協定（http: 或 https:）

location.href 屬性傳回目前頁面的 URL。

document.write(location.href)

location.pathname 屬性傳回 URL 的路徑名。

是實體位址的相對路徑位址

document.write(location.pathname);

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

可以用這個方法加載一個新文檔，實際感覺來說就是跳轉到指定位址的新頁面去

<script type="text/javascript" >
    function newDoc(){
        window.location.assign("https://www.runoob.com")
    }
</script>

<input type="button" value="加載新文檔" onclick="newDoc()">

History對象

window.history對象在編寫時可不使用 window 這個字首。

為了保護使用者隐私，對 JavaScript 通路該對象的方法做出了限制。

一些方法：

history.back() - 與在浏覽器點選後退按鈕相同
history.forward() - 與在浏覽器中點選向前按鈕相同

就相當于這兩個按鈕

後退

<script type="text/javascript" >
    function goBack() {
        window.history.back()
    }
</script>

<input type="button" value="Back" onclick="goBack()">

前進

<script type="text/javascript" >
    function goForward() {
        window.history.forward()
    }
</script>

<input type="button" value="Forward" onclick="goForward()">

Navigator對象

window.navigator 對象包含有關通路者浏覽器的資訊。

<div id="example"></div>
<script type="text/javascript" >
    txt = "<p>浏覽器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏覽器名稱: " + navigator.appName + "</p>";
    txt+= "<p>浏覽器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬體平台: " + navigator.platform + "</p>";
    txt+= "<p>使用者代理: " + navigator.userAgent + "</p>";
    txt+= "<p>使用者代理語言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

結果：

其中這一條在ES6已經不适用了？

另外，navigator 對象的資訊具有誤導性，

不應該被用于檢測浏覽器版本，這是因為：

navigator 資料可被浏覽器使用者更改
一些浏覽器對測試站點會識别錯誤
浏覽器無法報告晚于浏覽器釋出的新作業系統

Window對象的彈窗：

可以在 JavaScript 中建立三種消息框：警告框、确認框、提示框。

警告框經常用于確定使用者可以得到某些資訊。

當警告框出現後，使用者需要點選确定按鈕才能繼續進行操作。

window.alert("sometext");

可以不帶上window對象，直接使用alert()方法。

确認框通常用于驗證是否接受使用者操作。

當确認卡彈出時，使用者可以點選 "确認" 或者 "取消" 來确定使用者操作。

當你點選 "确認", 确認框傳回 true，如果點選 "取消", 确認框傳回 false。

window.confirm("sometext");

var r=confirm("按下按鈕");
if (r==true)
{
    x="你按下了\"确定\"按鈕!";
}
else
{
    x="你按下了\"取消\"按鈕!";
}

提示框經常用于提示使用者在進入頁面前輸入某個值。

當提示框出現後，使用者需要輸入某個值，然後點選确認或取消按鈕才能繼續操縱。

如果使用者點選确認，那麼傳回值為輸入的值。如果使用者點選取消，那麼傳回值為 null。

window.prompt("sometext","defaultvalue");

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

Windows對象的計時事件

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

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

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

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

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

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

第一個參數是函數（function）基于JS的特性，方法可以被視為一個對象給參數注入，其實Java的匿名實作類與匿名對象和這個非常相似

第二個參數間隔的毫秒數，注意: 1000 毫秒是一秒。

setInterval(function(){document.write("<h1>setInterval方法持續執行！！！</h1>")},500);

時鐘顯示：

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

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

window.clearInterval(intervalVariable)

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

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

停止時間輸出

<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    function myStopFunction(){
        clearInterval(myVar);
    }
</script>

setTimeout方法

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

setTimeout() 方法會傳回某個值。

在上面的語句中，值被儲存在名為 myVar 的變量中。

假如你希望取消這個 setTimeout()，你可以使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字元串。

這個語句可能諸如 "alert(\'5 seconds!\')"，或者對函數的調用，諸如 alertMsg。

第二個參數訓示從目前起多少毫秒後執行第一個參數。

JS和Cookie?

Cookie 用于存儲 web 頁面的使用者資訊，是一些資料, 存儲于你電腦上的文本檔案中。

web 伺服器向浏覽器發送 web 頁面時，在連接配接關閉後，服務端不會記錄使用者的資訊。

Cookie 的作用就是用于解決 "如何記錄用戶端的使用者資訊":

當使用者通路 web 頁面時，他的名字可以記錄在 cookie 中。
在使用者下一次通路該頁面時，可以在 cookie 中讀取使用者通路記錄。

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

username=John Doe

當浏覽器從伺服器上請求 web 頁面時，屬于該頁面的 cookie 會被添加到該請求中。

服務端通過這種方式來擷取使用者的資訊。

使用 document.cookie 屬性來建立、讀取、及删除 cookie。

JavaScript 中，建立 cookie 如下所示：

document.cookie="username=John Doe";

您還可以為 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。預設情況下，cookie 在浏覽器關閉時删除：

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

您可以使用 path 參數告訴浏覽器 cookie 的路徑。預設情況下，cookie 屬于目前頁面。

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

cookie 将以字元串的方式傳回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

讀取 cookie：

var x = document.cookie;

修改 cookie 類似于建立 cookie，如下所示：舊的 cookie 将被覆寫。

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

删除 cookie 非常簡單。您隻需要設定 expires 參數為以前的時間即可，如下所示，設定為 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 資訊是以名/值對的形式展示的。

如果您設定了新的 cookie，舊的 cookie 不會被覆寫。新 cookie 将添加到 document.cookie 中，是以如果您重新讀取document.cookie，您将獲得如下所示的資料：

cookie1=value; cookie2=value;