BOM

時間 2019-11-12

標籤 bom 简体版

原文原文鏈接

BOMhtml

1.什麼是BOM--------Brower Object Model 瀏覽器對象模型chrome

2.Why study? 在JS的語法中沒有輸入和輸出等任何操做，要想使得JS（人）可以操做瀏覽器（房子）的行爲就需要一個位於JS內部可是可以調用瀏覽器行爲的介質（房子名）.這個介質就是既位於 JS中又位於瀏覽器中的Global對象，Gloal對象在瀏覽器中的實現就是window對象（房子名）瀏覽器

3.學習BOM就是學習window對象框架

window的子對象屬性：ide

document 文檔對象 DOM函數

frames 框架集對象工具

history 瀏覽器歷史對象學習

location 瀏覽器位置信息對象測試

navigator 瀏覽器信息對象this

screen 瀏覽器屏幕對象

window中的關係屬性：

parent 表示當前頁面的上一級頁面的window對象

self 表示當前頁面的window對象

this 表示當前頁面的window對象

top 表示當前頁面的頂級頁面的window對象

opener 表示打開當前頁面的頁面的window對象

frames 框架集對象

//查找left.html的頁面的window對象

//alert(window.frames[1].location.href);

//alert(window.frames['topFrame'].location.href);

//查找left.html的頁面的window對象

//alert(frames[1].location.href);

//alert(frames['topFrame'].location.href);

//查找left.html的頁面的window對象

//alert(this.frames[1].location.href);

//alert(this.frames['topFrame'].location.href);

//查找left.html的頁面的window對象

//alert(self.frames[1].location.href);

//alert(self.frames['topFrame'].location.href);

//在頂級頁面中還可以使用parent和top來表明當前頁面的window

//alert(parent.frames[1].location.href);

//alert(parent.frames['topFrame'].location.href);

//alert(top.frames[1].location.href);

//alert(top.frames['topFrame'].location.href);

注意：1.以上全部的操做必須在框架集頁面的window.onload事件執行以內.！

2.不要在chrome瀏覽器中試驗

screen 屏幕對象 availWidth: 獲取當前屏幕的水平分辨率//screen.availWidth

availHeight: 獲取當前屏幕的垂直分辨率//screen.availHeight

window對象的其餘屬性和方法

窗口位置屬性

screenLeft 表示當前瀏覽器相對於屏幕的水平座標//window.screenLeft(非火狐瀏覽器)

screenTop 表示當前瀏覽器相對於屏幕的垂直座標//window.screenTop(非火狐瀏覽器)

screenX 表示當前瀏覽器相對於屏幕的水平座標//window.screenX(火狐瀏覽器)

screenY表示當前瀏覽器相對於屏幕的垂直座標//window.screenY(火狐瀏覽器)

窗口大小屬性、；

innerWidth：表示當前窗口的寬度(視窗)//window.innerWidth(非IE瀏覽器)

innerHeight：表示當前窗口的高度(視窗)//window.innerHeight (非IE瀏覽器)

//在IE的標準模式下(有 <!doctype html>)

document.documentElement.clientWidth 表示當前視窗的寬度

document.documentElement.clientHeight表示當前視窗的高度

//alert(document.documentElement.clientWidth);//1362

//alert(document.documentElement.clientHeight);//584

//在IE的怪異模式下(無 <!doctype html> 注意必須有body標籤)

document.body.clientWidth 表示當前視窗的寬度

document.body.clientHeight表示當前視窗的寬度

//alert(document.body.clientWidth);//1345

//alert(document.body.clientHeight);//584

窗口位置調整方法 moveTo(x,y) 將當前窗口移動到指定的位置//moveTo(100,100); 只對IE管用

moveBy(長度,長度) 將瀏覽器窗口在當前的位置上移動指定的長度 只對IE管用

長度正數表示向右或者向下移動，負數表示向左或者向上移動//moveBy(-30,-30);

窗口大小調整方法

resizeTo(寬度,高度) 將當前頁面調整到指定的大小//resizeTo(30,200);

resizeBy(長度,長度) 將當前頁面在當前大小的基礎上進行調整

長度：正數表示增大，負數表示減少//resizeBy(100,300);

屏幕焦點方法

blur() 失去焦點的方法

focus() 獲取焦點的方法

function jd(){

//失去焦點

blur();

//定時3秒鐘後自動獲取焦點

setTimeout(function(){

focus();

},3000);

}

定時執行和循環執行方法

setTimeout() 定時執行方法

格式：變量=setTimeout(回調函數,時間)

回調函數可使用三種方式

1.匿名函數 var test=setTimeout(function(){alert(11111111111111);},1000);

2.聲明函數名 var test1=setTimeout(tan,5000); function tan(){alert(22222222222222);}

3.聲明函數調用的字符串方式

var test2=setTimeout(‘tann()’,5000); function tann(){alert(22222222222222);}

clearTimeout() 清除定時執行的方法

格式：clearTimeout(定時執行的變量)

// 聲明中止定時的方法

function stopds(){

clearTimeout(test1);

}

setInterval() 循環執行方法 只對google管用

格式：變量=setInterval(回調函數,時間)

回調函數可使用三種方式

1匿名函數var test=setInterval(function(){ document.write('123'); },1000);//推薦

2聲明函數名

3聲明函數調用的字符串方式

clearInterval(); 清除循環執行的方法

格式: clearInterval(循環執行的變量)

var num=1;

var xhtest=setInterval(function(){

content.innerHTML+=num+'-';

num++;

},1);

function stopxh(){

clearInterval(xhtest);

}

新窗體的操做：

open() 打開一個新的頁面

格式： open(URL地址,打開方式,頁面設定,是否替換當前頁面)

var newpage=open('2.html','_blank','width=400,height=400,resizable=no,left=200,top=200');

參數名稱	類型	說明
height	Number	設置窗體的高度，不能小於100
left	Number	說明建立窗體的左座標，不能爲負值
location	Boolean	窗體是否顯示地址欄，默認值爲no
resizable	Boolean	窗體是否容許經過拖動邊線調整大小，默認值爲no
scrollbars	Boolean	窗體中內部超出窗口可視範圍時是否容許拖動，默認值爲no
toolbar	Boolean	窗體是否顯示工具欄，默認值爲no
top	Number	說明建立窗體的上座標，不能爲負值
status	Boolean	窗體是否顯示狀態欄，默認值爲no
width	Number	建立窗體的寬度，不能小於100