JavaScriptBOM操做

       BOM（瀏覽器對象模型）主要用於管理瀏覽器窗口，它提供了大量獨立的、能夠與瀏覽器窗口進行互動的功能，這些功能與任何網頁內容無關。瀏覽器窗口的window對象是BOM的頂層對象，其餘對象都是該對象的子對象。

1.1使用window對象

window對象是BOM的核心，表明瀏覽器窗口的一個實例。在全局做用域中聲明的全部變量和函數也是window對象的屬性和方法。

1.1.1 訪問瀏覽器窗口

經過window對象可用訪問瀏覽器窗口。

瀏覽器對象簡單說明以下：

window	客戶端JavaScript中的頂層對象。
navigator	包含客戶端有關瀏覽器的信息。
screen	包含客戶端顯示屏的信息。
history	包含瀏覽器窗口訪問過的URL信息。
location	包含當前網頁文檔的URL信息。
document	包含整個HTML文檔，可被用來發訪問文檔內容，及其全部頁面元素。

1.1.2全局做用域

客戶端JavaScript代碼都在全局上下文環境中運行，window對象提供了全局做用域。

下面用法：

var a = '我是程序員';
window.b = 'window.b';
c = '我喜歡js';
document.write(delete window.a);
document.write(delete window.b);
document.write(delete window.c + '<br>');
document.write(window.a);
document.write(window.b);
document.write(window.c);

使用var語句聲明全局變量，window會爲這個屬性定義一個名爲‘configgurable’的特性。

1.1.3 使用系統測試方法

window對象定義了3我的機交互的接口方法：

1.  alert()：簡單的提示對話框，由瀏覽器向用戶彈出提示性信息。該方法包含一個可選的提示信息參數。

2.  confirm()：簡單的提示對話框，由瀏覽器向用戶彈出提示性信息。不過該方法彈出的對話框包含兩個按鈕，‘確認’和‘取消’。

3.  prompt()：彈出提示對話框，能夠接收用戶輸入的信息，並把用戶輸入的信息返回。

用法1：

var user = prompt('請輸入你的用戶名:');
if (!!user) {
var ok = confirm('你輸入的用戶名爲：\n' + user + '\n請確認。');
if (ok) {
document.write('歡迎您：\n' + user);
} else {
user = prompt('請從新輸入你的用戶名:');
document.write('歡迎您：\n' + user);
}
} else {
user = prompt('請輸入你的用戶名:');
}

       這3個僅接收純文本信息，用戶只能使用空格、換行符和各類符號來格式化提示對話框中的顯示文本。不一樣瀏覽器對於這3個對話框的顯示效果略有不一樣。

用法2：

window.alert = function (title, info) {
var box = document.getElementById('alert_box');
var html = '<dl><dt>' + title + '</dt><dd>' + info + '</dd><\/dl>';
if (box) {
box.innerHTML = html;
box.style.display = 'block';
} else {
var div = document.createElement('div');
div.id = 'alert_box';
div.style.display = 'block';
document.body.appendChild(div);
div.innerHTML = html;
}
}
alert('我是程序員', '我喜歡Js!');

1.1.4 控制窗口位置

       使用window對象的moveTo()和moveBy()方法能夠將窗口精確地移動到一個新位置。這兩個方法接收兩個參數，其中moveTo()接收的是新位置的x和y座標值，而moveBy()接收的是在水平和垂直方向上移動的像素數。

下面用法：

window.moveTo(0, 0);
window.moveBy(0, 100);
window.moveTo(200, 300);
window.moveBy(-50, 0);

1.1.5 使用定時器

window對象包含4個定時器專用方法，使用他們能夠實現倒黴定時運行，避免連續運行。就能夠設計動畫。

1. setTimeout()方法

定義：

setTimeout()方法用於在指定的毫秒數後調用函數或計算表達式。

語法：

var o=setTimeout(code,millisec)

參數：

code	（必需。要延時執行的代碼字符串。）
millisec	必需。在執行代碼前需等待的毫秒數。）

下面用法：

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
}
function f(o) {
var out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

2. clearTimeout()方法

定義：

clearTimeout()方法可取消由setTimeout()方法設置的timeout。

語法：

clearTimeout(id_of_settimeout)

參數：

id_of_settimeout（由setTimeout()返回的ID值。該值標識要取消的延遲執行代碼塊。）

下面用法：

var o = document.getElementsByTagName('body')[0].childNodes;
for (var i = 0; i < o.length; i++) {
o[i].onmouseover = function (i) {
return function () {
f(o[i]);
}
}(i);
o[i].onmouseout = function (i) {
return function () {
clearTimeout(o[i].out);
}
}(i);
}
function f(o) {
o.out = setTimeout(function () {
document.write(o.tagName);
}, 500);
}

3. Setlnterval()方法

定義：

setInterval()方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。

setInterval()方法會不停地調用函數，直到clearInterval()被調用或窗口被關閉。由setInterval()返回的ID值可用做clearInterval()方法的參數。

語法：

setInterval(code,millisec[,"lang"])

參數：

code（必需。要調用的函數或要執行的代碼串。）

millisec（必須。週期性執行或調用 code 之間的時間間隔，以毫秒計。）

下面用法：

var t = document.getElementsByTagName('input')[0];
var i = 959;
var out = setInterval(f, /*24 * 60 * 60 */ 1000);
function f() {
t.value = i--;
if (i <= 0) {
crearTimeout(out);
document.write('冬奧會已到！');
}
}

       在動畫設計中，setInterval()方法適合在不肯定的時間內持續執行某個動做，而setInterval()方法適合在有限的時間內執行能夠肯定起點和終點的動畫。

1.2 使用navigator對象

navigator對象包含了瀏覽器的基本信息，如名稱、版本和系統等。利用它的屬性來讀取客戶端基本信息。

1.2.1 瀏覽器檢測方法

瀏覽器檢測的方法有多種。

經常使用方法包括2種：

特徵檢測法

字符串檢測法

1. 特徵檢測法

特性檢測法就是根據瀏覽器是否支持特定功能來決定操做的方式。

下面用法：

if (document.getElementsByName) {
var a = document.getElementsByName('p');
} else if (document.getElementsByTagName) {
var a = document.getElementsByTagName('p');
}

2. 字符串檢測法

使用用戶代理字符串檢測瀏覽器類型。

下面用法：

var s = window.navigator.userAgent;
console.log(s);

1.2.2 檢測插件

可使用navigator對象的plugins屬性實現。而plugins是一個數組。

該數組中的每一項都包含下列屬性：

name	插件的名字。
description	插件的描述。
filename	插件的文件名。
length	插件所處理的MIME類型。

下面用法：

function hasPlugin(name) {
name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
document.write(hasPlugin('Flash'));
document.write(hasPlugin('QuickTime'));
document.write(hasPlugin('Java'));

1.3 使用location對象

location對象存儲當前頁面與位置相關的信息，表示當前顯示文檔的Web地址。使用location對象，結合字符串方法能夠抽取URL中查詢字符串的參數值。

用法1：

var queryString = function () {
var q = location.search.substring(1);
var a = q.split('&');
var o = {};
for (var i = 0; i < a.length; i++) {
var n = a[i].indexOf('=');
if (n == -1) continue;
var v1 = a[i].substring(o, n);
var v2 = a[i].substring(n + 1);
o[v1] = unescape(v2);
}
return o;
};

var f1 = queryString();
for (var i in f1) {
document.write(i + '=' + f1[i]);
}

用法2：跳轉網頁。

location = 'http://www.bj-xinhua.com/?bdpz';

1.4 使用history對象

      history對象存儲瀏覽器窗口的瀏覽歷史，經過window對象的history屬性能夠訪問該對象。實際上，history對象存儲最近訪問的、有限條目的URL信息。爲了保護客戶端瀏覽信息的安全和隱私，history對象禁止Js腳本直接操做這些訪問信息。

history對象容許使用length屬性讀取列表中URL的個數，並能夠調用back()、forward()和go()方法訪問數組中的URL。

1. back()：返回到前一個URL。

2. forward()：訪問下一個URL。

3. go()：該方法比較靈活，它能根據參數決定可訪問的URL。

• 該參數是正整數，瀏覽器就會在歷史列表中向前移動；該參數是負整數，瀏覽器就會在歷史列表中向後移動；

• 參數爲一個字符串，則history對象可以從瀏覽歷史中檢索包含該字符串的URL，並訪問第一個檢索到的URL。

下面用法：

frames[1].history.back();

1.5 使用screen對象

screen對象存儲客戶端屏幕信息，這些信息能夠用來探測客戶端硬件的基本配置。知足不一樣用戶的顯示要求。

下面用法：

function center(url) {
    var w = screen.availWidth / 2;
    var h = screen.availHeight / 2;
    var t = (screen.availHeight - h) / 2;
    var l = (screen.availWidth - w) / 2;
    var p = 'top=' + t + ',left=' + l + ',width=' + w + ',height=' + h;
    var win = window.open(url, 'url', p);
    win.focus();
  }
center('file:///D:/jsBOM%E6%93%8D%E4%BD%9C/11history.html');

1.6 使用document對象

在瀏覽器窗口中，每一個widow對象都會包含一個document屬性，該屬性引用窗口中顯示HTML文檔的document對象。

1.6.1 動態生成文檔內容

下面用法：

window.onload = function () {
document.body.onclick = f;
}
function f() {
parent.frames[1].document.open();
parent.frames[1].document.write('<h2>我是程序員</h2>');
parent.frames[1].document.close();
}