JavaScriptBOM操作

       BOM（瀏覽器物件模型）主要用于管理瀏覽器視窗，它提供了大量獨立的、可以與瀏覽器視窗進行互動的功能，這些功能與任何網頁內容無關，瀏覽器視窗的window物件是BOM的頂層物件，其他物件都是該物件的子物件，

1.1使用window物件

window物件是BOM的核心，代表瀏覽器視窗的一個實體，在全域作用域中宣告的所有變數和函式也是window物件的屬性和方法，

1.1.1 訪問瀏覽器視窗

通過window物件可用訪問瀏覽器視窗，

瀏覽器物件簡單說明如下：

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)

引數：

下面用法：

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 = https://www.cnblogs.com/hjy0806/p/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是一個陣列，

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

下面用法：

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();
}

標籤：JavaScript

上一篇：(辦公)html5與css3的相關知識

下一篇：vue 中 用showdown預覽markdown檔案，并用highlight.js 實作代碼高亮