javaScript BOM物件分析整理

###什麼是BOM

BOM 是 browser object model 的縮寫，意思是瀏覽器物件模型

BOM提供了獨立於內容而與瀏覽器視窗進行互動的物件

BOM主要用於管理視窗與視窗之間的通訊，因此其核心物件是window

BOM由一些列相關物件構成，並且每個物件提供 很多方法與屬性

BOM缺乏標準，javascript 語法的標準組織是ECMA，DOM的標準組織是W3C

BOM 最初是Netscape 瀏覽器標準的一部分

**ECMA：前身為歐洲計算機制造商協會，英文名稱是 European Computer Manufacturers Association,人們常常看到的ECMAscript 是通過ECMA-262 標準化的指令碼程式設計語言。

**ECMAscript 5，ECMAscript 6 就是說符合相關標準，符合ECMA-262 規範，現在最新已經達到了ECMAscript 7 ，具體還在草擬。ECMAscript 6 尚未普及，原因是低版本瀏覽器尚有一定份額市場。

**W3C ： World Wide Web Consortium，全球資訊網聯盟，創於1994年，是web技術領域最具權威和影響力的國際中立性技術標準機構。

**WCAG：web內容的資訊無障礙指南。由W3C提出。

---

##BOM的結構圖

##WIndow 函式索引 ###視窗控制函式 *javascript moveBy() 函式 moveBy -- 從單前水平移動x個畫素，垂直移動y個畫素。

window.moveBy(x,y);

複製程式碼

---

*javascript moveTo() 函式 moveTo -- 移動到 （x,y）點。

window.moveto(x,y)
複製程式碼

---

**javascript resizeBy() 函式 resizeBy -- 相對於視窗當前的大小，寬度調整w個畫素，高度調整h個畫素，如果為負數則為縮小窗體。

window.resizeBy()
複製程式碼

---

*javascript resizeTo() 函式 resizeTo -- 調整視窗大小到（w,h）

window.resizeTo(w,h)
複製程式碼

---

###視窗滾動軸控制函式 **javascript scrollTo() scrollTo -- 將橫向滾動條滾動到相對於窗體寬度為x個畫素的位置，將縱向滾動條移動到現對於窗體高度為y個畫素的位置。

scrollTo(x,y)
複製程式碼

** javascript scrollBy() scrollTo -- 如果有滾動條，將橫線向左移動x個畫素，將縱向滾動條向下移動y個畫素。

scrollTo(x,y)

複製程式碼

---

###視窗焦點控制函式

• javascript focus（）函式 focus --使窗體或控制元件獲取焦點

focus();
blur();//失去焦點
複製程式碼

• javascript blur() blur -- 模糊，使窗體或者控制元件失去焦點

blur();
複製程式碼

---

###新建窗體函式 -- open() 開啟 -- close() 關閉 -- opener 屬性,開啟者 可以實現窗體之間的通訊，當時要保證是在同一域名下，而且窗體要包涵另為一個窗體的opener

var oWin=window.open("http://www.dreamdu.com/", "dreamduwin");
if(!oWin||!oWin.closed)
{
        document.write(oWin.opener==window);
}
複製程式碼

---

###對話方塊函式 -- alert()
-- confirm() 對話方塊包涵OK和Cancel 按鈕 -- prompt()
對話方塊包涵OK，cancel 和輸入框

var sResult=prompt("請在下面輸入你的姓名", "夢之都");
if(sResult!=null)
{
        alert("你好"+sResult);
}
else
{
        alert("你好 my friend.");
}
複製程式碼

---

###狀態列屬性 -- window.defaultStatus 屬性 -- window.status 屬性 上面倆個屬性大部分瀏覽器不支援

---

###時間等待與間隔函式 --setTimeout(callback, after); 指定多少毫秒後執行指定程式碼。

<script>
		setTimeout(function(){
			alert('haha');
		}, 1000);
</script>
複製程式碼

-- clearTimeout(id) 取消指定的 setTimeout 函式將要執行的程式碼

<script>
	 var ftnId = setTimeout(function(){
			alert('haha');
		}, 1000);
        //清除
	 clearTimeout(ftnId);
	</script>
複製程式碼

-- setInterval(callback, repeat); 間隔指定的毫秒數不停執行指定的程式碼

<script>
	 var funId = setInterval(printLog, 1000);
	 function printLog(){
	 	console.log('log');
	 }
</script>
複製程式碼

--clearInterval(funId) 清除取消指定的setInterval 函式將要執行的程式碼

<script>
	 var funId = setInterval(printLog, 1000);
	 function printLog(){
	 	console.log('log');
	 }
        //可以加相關的條件判斷，達到一定條件就清除
        clearInterval(funId);
</script>
複製程式碼

---

javascript frames 物件

--window 當前框架 --top 最頂層的框架，瀏覽器本體 --parent 包涵當前框架的父框架 --self 當前框架，總等於window物件

javascript histroy 物件函式

history.go(num)

去歷史的指定頁數,num負數為後退指定頁數，正數為前進指定頁數

<a href="javascript:history.go(-1);">返回上一頁</a>

複製程式碼

history.back();

後退一頁，需要有跳轉後才有效果

history.forward();

歷史的前一頁，需要點選返 回該事件才有效果

詳情請列印history 物件檢視

---

###location 物件