1. 程式人生 > >js瀏覽器物件模型BOM

js瀏覽器物件模型BOM

1.Window 物件

1.所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
2.Window 尺寸:
window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條)
window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)
3.window.open() - 開啟新視窗
window.close() - 關閉當前視窗
window.moveTo() - 移動當前視窗
window.resizeTo() - 調整當前視窗的尺寸

2. Window Screen

1.window.screen物件包含有關使用者螢幕的資訊。
2.屬性:
screen.Width - 螢幕寬度
screen.Height - 螢幕高度
screen.availWidth - 可用的螢幕寬度
screen.availHeight - 可用的螢幕高度

3.Window Location

1.window.location 物件用於獲得當前頁面的地址 (URL),並把瀏覽器重定向到新的頁面。
2.屬性
location.href 屬性返回當前頁面的 URL
location.assign() 方法載入新的文件。
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和檔名
location.port 返回 web 主機的埠 (80 或 443)
location.protocol 返回所使用的 web 協議(http:// 或 https://)

4.Window History

1.window.history 物件包含瀏覽器的url歷史。
2.屬性
history.back() 方法載入歷史列表中的前一個 URL,與在瀏覽器中點選後退按鈕是相同的。
history forward() 方法載入歷史列表中的下一個 URL,與在瀏覽器中點選前進按鈕是相同的。
history go() 方法進入某歷史介面。

<script>
        function safe() {
            var name=document.getElementById("username").value;
            if (name=="hello"){
                history.go(-1);     //表示跳轉回上一個頁面
            }
            else {
                alert("輸出錯誤");
            }
        }
    </script>

5.Window Navigator

window.navigator 物件包含有關訪問者瀏覽器的資訊。

6.彈窗

1.建立三種訊息框:警告框、確認框、提示框。
2.警告框經常用於確保使用者可以得到某些資訊。當警告框出現後,使用者需要點選確定按鈕才能繼續進行操作。使用alert()方法
3.確認框通常用於驗證是否接受使用者操作。當確認卡彈出時,使用者可以點選 “確認” 或者 “取消” 來確定使用者操作。當你點選 “確認”, 確認框返回 true, 如果點選 “取消”, 確認框返回 false。使用confirm()方法。

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

4.提示框經常用於提示使用者在進入頁面前輸入某個值。當提示框出現後,使用者需要輸入某個值,然後點選確認或取消按鈕才能繼續操縱。如果使用者點選確認,那麼返回值為輸入的值。如果使用者點選取消,那麼返回值為 null。使用prompt()方法。
5.換行:彈窗使用 反斜槓 + “n”(\n) 來設定換行。

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

7.計時事件

1.setInterval() 方法:setInterval() 間隔指定的毫秒數不停地執行指定的程式碼。
語法window.setInterval("javascript function",milliseconds);
第一個引數是函式(function),第二個引數間隔的毫秒數。
2.clearInterval() 方法用於停止 setInterval() 方法執行的函式程式碼。
語法window.clearInterval(intervalVariable)
3.setTimeout() 方法暫停指定的毫秒數後執行指定的程式碼
語法myVar= window.setTimeout("javascript function", milliseconds);
4.learTimeout() 方法用於停止執行setTimeout()方法的函式程式碼。
語法window.clearTimeout(timeoutVariable)

8.Cookie

1.Cookie 用於儲存 web 頁面的使用者資訊。
2.建立
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/"; 建立,expires 引數為過期時間,path為路徑
3.讀取var x = document.cookie;
將以字串的方式返回所有的 cookie,型別格式: cookie1=value; cookie2=value; cookie3=value;
4.修改:修改 cookie 類似於建立 cookie,舊的 cookie 將被覆蓋。
5.刪除: 只需要設定 expires 引數為以前的時間即可
6.Cookie 字串
document.cookie 屬性看起來像一個普通的文字字串,其實它不是。
重新讀取該 cookie 資訊時,cookie 資訊是以名/值對的形式展示的。
如果設定了新的 cookie,舊的 cookie 不會被覆蓋。