JS-BOM

1、BOM

 BOM是browser object model的縮寫，簡稱瀏覽器對象模型。

BOM提供了獨立於瀏覽器顯示內容而與瀏覽器窗口進行交互的對象。

        我的理解是，咱們知道瀏覽器顯示的Document,javascrip 要想操做網頁，須要DOM來進行訪問，可是僅僅只是網頁內容。瀏覽器除了有顯示的內容，還有一個重要的部分就是一個載體，它承載咱們看到的內容。比如是一個框架，而操做這個載體的對象咱們把它叫作BOM。因此這樣的結構，使得BOM，DOM各司其職，BOM負責跟瀏覽器框架打交道，DOM負責瀏覽器內容Document打交道。

       BOM主要用於管理瀏覽器窗口之間的通信，由一系列相關的對象構成，而且每一個對象都提供了不少方法與屬性。經過BOM咱們能夠學到與瀏覽器窗口交互的一些對象，能夠移動，調整瀏覽器大小的window對象，能夠用於導航的location對象與history對象，能夠獲取瀏覽器，操做系統與用戶屏幕信息的navigator與screen對象，能夠使用document做爲訪問HTML文檔的入口，管理框架的frames對象等。所以它的核心對象是window。

2、BOM結構圖

/*
1.window對象是最頂層的對象
2.window對象有六大屬性，這六個屬性自己也是對象
3.window對象下的document屬性，也是對象，而且document對象下有五個屬性。
4.document對象下的五個屬性也是對象。總結，都是對象。

調用
window的屬性和方法的調用：window.屬性，window.方法()
也能夠直接屬性，方法()
若是是某個瀏覽器獨有的屬性或者方法，那麼在其餘瀏覽器可能會不識別，看成變量或者看成普通函數

closed = '123'; //若是有瀏覽器不認識，就看成變量了
強制性的操做
window.closed; //強制性

window.alert('Lee'); //這個全部瀏覽器都認識，能夠不加window.

肯定和取消
confirm('請'); //這裏有肯定和取消按鈕，自己方法能夠返回一個布爾值。
//若是點擊肯定，返回true，若是點擊了取消，返回false
if(confirm('請選擇！')){
alert('您按了肯定按鈕！');
}else{
alert('您按了取消按鈕！');
}

輸入提示框
prompt('請輸入一個數值',0); //第一個參數是說明，第二個參數是默認值，返回輸入的值
var box = prompt('請輸入一個數值',0);
if(box != null){
alert(box); //返回值能夠獲得
}

調出打印及查找對話框
//print(); //打印
//find(); //查找

defaultStatus="Lee"; //瀏覽器底部狀態欄初始默認值
status = "Lee"; //瀏覽器底部狀態欄設置值。

新建窗口
open()參數
1.第一個參數，是你將要導航到的URL
2.第二個參數是窗口名稱或目標,命名能夠給新窗口設置一個名稱，凡是以這個名稱打開的窗口，都在這個窗口裏加載URL
open('http://www.163.com','baidu');
目標：_blank新建一個窗口,_parent表示在本窗口內加載
open('http://www.163.com','_parent');
3.特定的字符串，表示各類窗口配置的功能
open('http://www.163.com','baidu','width=400,height=400,top=100,left=100,location=yes,toolbar=yes');

var box = open('http://www.163.com','baidu','width=400,height=400,top=100,left=100');
//alert('Lee'); //這裏的alert實際上是window.alert，表示的是父窗口

//open自己會返回子窗口的window對象，表示子窗口彈出
box.alert('Lee');

open('opener.html','baidu','width=400,height=400,top=100,left=100');
document.onclick=functon(){
window.opener.document.write('子窗口讓我輸出一行字！');
};
//點擊子窗口激活父窗口

肯定窗口的位置
alert(screenLeft);
alert(screenTop);
//這兩個屬性火狐不認識，就會看成是沒有聲明初始化的變量，會報錯，必須強制在這個屬性前面加上window
alert(window.screenLeft);
alert(window.screenTop);

alert(typeof window.screenLeft); //火狐undefined,其餘number，數值。

alert(window.screenX);
alert(window.screenY);

跨瀏覽器方法
var leftX = typeof window.screenLeft == 'number'?window.screenLeft:window.screenX;
var topY = typeof window.screenTop == 'number'?window.screenTop:window.screenY;
alert(leftX);
alert(topY);

alert(window.innerWidth);
alert(window.innerHeight);
//窗口頁面的大小

alert(window.outerWidth);
alert(window.outerHeight);
//窗口+邊框大小

alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
//IE支持

//跨瀏覽器獲取視口（可視範圍的頁面窗口）
//若是是Firefox瀏覽器，直接使用innerWidth和innerHeight
var width = window.innerWidth; //這裏要加window，由於IE會無效
var height = window.innerHeight;

//不支持的就是用document對象的方法
if(typeof width != 'number' ){ //若是是IE，就使用document
if(document.compatMode == 'CSS1Compat'){
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}else{
width = document.body.clientWidth; //非標準模式使用body
height = document.body.clientHeight;
}
}
alert(width);
alert(height);

調整瀏覽器的位置
//moveTo(100,100);
//moveBy(10,10); //IE原版支持，谷歌不支持

調整瀏覽器的大小
//resizeTo(300,300);
//resizeBy(-10,-10);

超時調用
//setTimeout第一個參數能夠是字符串，而裏面能夠是代碼塊，由於它有解析功能，因此引號裏面仍是能夠執行的。
//這種寫法不推薦，容易出錯，不容易擴展
//setTimeout("alert('Lee')",2000); //2秒後執行第一個參數的代碼塊

function box(){
alert('Lee');
}
setTimeout(box,2000); //第一個參數，直接存放一個函數

setTimeout(function box(){ //推薦，擴展和封裝性好。
alert('Lee');
},2000);

var box = setTimeout(function(){ //返回值是超時調用的ID的數值
alert('Lee');
},2000);
alert(box); //打印出box是數值2
clearTimeout(box); //取消當前超時調用計劃

間歇調用
var box = setInterval(function(){ //間歇調用，能夠重複不斷的執行
alert('Lee');
},1000)
clearInterval(box); //取消當前間歇調用計劃

定時器實例
var num = 0; //從零秒開始
var max = 5; //最大秒數五秒
var id = null;
function box(){ //this自己不能表明ID
num++;
document.getElementById('a').innerHTML += num;
if(num == max){ //若是等於5
clearInterval(id); //中止執行
alert('5秒到了！'); //並輸出
}
}
id = setInterval(box,1000); //將執行函數存放在id裏。每秒鐘執行一次。

//使用超時調用，模擬定時器
var num = 0;
var max = 5;
function box(){
num++;
document.getElementById('a').innerHTML += num;
if(num == max){ //若是等於5
alert('5秒到了！'); //並輸出
}else{
setTimeout(box,1000);
}
}
setTimeout(box,1000);

location對象
//alert(window.location);
alert(window.document.location);

location.hash = '#66'; //設置#後的字符串，並跳轉
alert(location.hash); //獲取#後的字符串

location.port = 8888; //設置端口號，並跳轉
alert(location.port); //獲取當前端口號

location.search = '?id=5'; //死循環
alert(location.search); //若是設置search會不停的跳轉

location.href = 'http://www.baidu.com'; //跳轉到指定域名
location.assign('http://www.baidu.com');
location.replace('http://www.baidu.com'); //不產生任何歷史記錄的跳轉

history對象
alert(history.length); //歷史記錄的總量

function back(){
history.back(); //前往瀏覽器歷史條目前一個URL，相似後退
}
function forward(){
history.forward(); //前往瀏覽器歷史條目下一個URL，相似前進
}
function go(num){
history.go(num); //瀏覽器在history對象中向前或向後
}
*/

/*function getArgs(){
var qs = location.search.length > 0 ? location.search.substring(1):'';
var items = qs.split('&');
var item = null,name=null,value=null;

for(var i=0; i<items.length; i++){
item = items[i].split('=');
name = item[0];
value = item[1];
alert(name);
alert(value);
//id=5&search=ok
}
return items;
}
alert(getArgs());*/

/*function getArgs(){
var args = [];
var qs = location.search.length > 0 ? location.search.substring(1):'';
var items = qs.split('&');
var item = null,name=null,value=null;

for(var i=0; i<items.length; i++){
item = items[i].split('=');
name = item[0];
value = item[1];
args[name] = value;
}
return args;
}
var args = getArgs();
alert(args['id']);
alert(args['search']);*/

 

 

 

/*定時器實例var num = 0; //從零秒開始var max = 5; //最大秒數五秒var id = null;function box(){ //this自己不能表明ID num++; document.getElementById('a').innerHTML += num; if(num == max){ //若是等於5 clearInterval(id); //中止執行 alert('5秒到了！'); //並輸出 }}id = setInterval(box,1000); //將執行函數存放在id裏。每秒鐘執行一次。*/