1.1 BOM
BOM提供了一組以window為核心的對象，實現了對瀏覽器窗口的訪問控制。BOM中定義了6種重要的對象：
- window對象表示瀏覽器中打開的窗口；
- document對象表示瀏覽器中加載頁面的文檔對象；
- location對象包含了瀏覽器當前的URL信息；
- navigation對象包含了瀏覽器本身的信息；
- screen對象包含了客戶端屏幕及渲染能力的信息；
- history對象包含了瀏覽器訪問網頁的歷史信息。
| 方法 |
用法 |
說明 |
| window.moveBy 將瀏覽器窗口移動到指定位置（相對定位） |
window.moveBy(dx,dy) |
出於安全性和對用戶有好的考慮，不允許使用JavaScript腳本將窗口移動到可視區域之外，必須始終保證瀏覽器窗口在屏幕的可視區域。 |
| window.moveTo 將瀏覽器窗口移動到指定位置 （絕對定位） |
window.moveBy(x,y) |
如果指定的坐標(x,y)會使部分或全部窗口置於可視區域之外，那么窗口將停留在最接近屏幕邊緣的位置。 |
| window.resizeBy 將瀏覽器窗口的尺寸改變指定的寬度和高度（相對調整窗口大小） |
window.resizeBy(dw,dh) |
|
| window.resizeTo 將瀏覽器窗口的尺寸改變指定的寬度和高度（絕對調整窗口大小） |
window.resizeTo(w,h) |
指定的寬度和高度不能為負數 |
2. 打開新窗口
用法：window.open([url],[target],[options])
參數url：打開新新窗口將要加載的url。如果未指定參數，將默認加載空白頁。如：window.open("test.htm");
參數target：新打開窗口的定位目標或者名稱
_self 在當前窗口加載新頁面
_blank 在新窗口加載新頁面
_parent 在父窗口加載新頁面
_top 在頂層窗口加載新頁面
參數options：新打開窗口的屬性，是由若干個選項組成，選項之間用逗號分隔開，每個選項都包含了選項的名稱和值。
| 選項 |
說明 |
| height |
窗口的高度，單位像素 |
| width |
窗口的寬度，單位像素 |
| left |
窗口的左邊緣位置 |
| top |
窗口的上邊緣位置 |
| fullscreen |
是否全屏，默認值no |
| location |
是否顯示地址欄，默認值yes |
| menubar |
是否顯示菜單欄，默認值yes |
| resizable |
是否允許改變窗口大小，默認值yes |
| scrollbars |
是否顯示滾動條，默認值yes |
| status |
是否顯示狀態欄，默認值yes |
| titlebar |
是否顯示標題欄，默認值yes |
| toolbar |
是否顯示工具條，默認值yes |
window.open簡單示例：
第一個頁面代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>打開新窗口示例</title>
5 <style type="text/css">
6 #editor
7 {
8 width:300px;
9 }
10 #title, #editor textarea
11 {
12 width:100px;
13 height:80%;
14 }
15 </style>
16 <script type="text/javascript">
17 function newWin() {
18 //打開新窗口
19 var win = window.open("windowtwo.htm", "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=300");
20 }
21 </script>
22 </head>
23 <body>
24 <form action="#">
25 <div id="editor">
26 標題：
27 <input type="text" id="title" /><br />
28 內容：
29 <textarea cols="30" rows="5" id="content"></textarea><br />
30 <input type="button" value="提交" />
31 <input type="button" value="在新窗口中編輯" onclick="newWin()" />
32 </div>
33 </form>
34 </body>
35 </html>
第二個頁面代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>新窗口</title>
5 <style type="text/css">
6 #editor
7 {
8 width:300px;
9 }
10 #title, #editor textarea
11 {
12 width:100%;
13 height:80%;
14 }
15 </style>
16 <script type="text/javascript">
17 function newWindow() {
18 //父窗口
19 var parent = window.opener;
20 if (!parent) {
21 return;
22 }
23 //從父窗口中獲取標題和內容，填入子窗口的相應位置
24 $("title").value = parent.document.getElementById("title").value;
25 $("content").value = parent.document.getElementById("content").value;
26 }
27
28 function $(id) {
29 return document.getElementById(id);
30 }
31 </script>
32 </head>
33 <body onload="neWindow()">
34 <form action="#">
35 <div id="editor">
36 標題：
37 <input type="text" id="title" />
38 內容：
39 <textarea cols="30" rows="5" id="content"></textarea>
40 <input type="button" value="提交" />
41 <input type="button" value="在新窗口中編輯" onclick="neWin()" />
42 </div>
43 </form>
44 </body>
45 </html>
效果如下：
今天就寫到這里，明天繼續系統提示框、狀態欄控制、定時操作的講解。