之前學習了BOM對象，爲了鞏固知識點和了解編程思維，我們做個小案例。
案例：編寫一個頁面，有若干個輸入項和一個按鈕，點擊按鈕跳出一個小窗口，在小窗若干個數據，點擊選擇按鈕選擇數據後關閉小窗口，將選好的數據分別打入輸入線中：
步驟：
第一步：編寫第一個頁面，使用input實現輸入項和按鈕
<html>
<head>
<meta charset="utf-8">
<title>BOM案例</title>
</head>
<body>
<!--編寫第一個頁面，之中有個按鈕實現跳轉-->
編號：<input type="text" id="id1" value=""><br>
姓名：<input type="text" id="id2" value=""><br>
<!--按鈕實現跳轉-->
<input type="button" value="點擊選擇" onclick="SelectInput()">
</body>
<script language="javascript">
function SelectInput(){
<!--實現跳轉功能,xuanze.html爲要跳轉的的頁面並設置其寬和高-->
window.open("xuanze.html","","width=50px,height=200px");
}
</script>
</html>
頁面顯示效果爲：
第二步：編寫另一個網頁
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="選擇" onclick="dome1('0010','小米');"><font>0010</font>   <font>小米</font>
<br><hr>
<input type="button" value="選擇" onclick="dome1('0012','小含');">
<font>0012</font>   <font>小含</font>
</body>
<script>
function dome1(num1,nam1){
<!--window的opener屬性是獲取創建這個頁面的頁面，-->
var fuYueMian = window.opener;
var p1= fuYueMian.document.getElementById("id1");
p1.value=num1;
var p2= fuYueMian.document.getElementById("id2");
p2.value=nam1;
window.close();
}
</script>
</html>
實現效果：
點擊選擇後的效果：
當點擊選擇後，選擇欄對應的數據會傳入主頁面。
注：close（）的兼容性差，有些網頁不顯示效果，請使用IE6.0以上版本或者谷歌瀏覽器、火狐瀏覽器。
請勿使用小衆瀏覽器運行。