js之彈出子視窗
關於彈出框，之前在專案中，一直想新增，奈何好多都忘了，今天重新學了一把，廢話少說，直接上效果與原始碼分析
一、簡單實現效果
建議大家不再在學習window.showModalDialog了，這個方法在2014年已經被谷歌等主流瀏覽器取消函數了
二、原始碼
首先我們有父視窗與子視窗，並且子視窗能將資料傳送到父視窗中
父視窗原始碼
|
<script language="JavaScript"> <script language="JavaScript"> //彈出框 function openWin() { window.open( } function setValue(sid,sname) { document.getElementById("sid").value=sid; document.getElementById("sname").value=sname; } </script> <body <form name="form1" action="test.html" method="post"> 學號: <input type="text" name="sid" value="" id="sid"><br> 姓名:<input type="text" name="sname" value="" id="sname"> <input type="button" name="ok" value="請選擇學生" onclick="openWin();" </form> </body> 在此簡單解釋 /* * window.open( sURL , sName , sFeatures) * * sURL:指定要被載入的HTML文件的URL地址。假如無指定值，則 about:blank 的新視窗會被顯示 * * sName:指定開啟的視窗的名字 * * _blank: 在新視窗中開啟 sUrl * * _self:sUrl 在當前視窗中開啟，覆蓋當前文件 * * sFeatures:指定視窗裝飾樣式。使用下面的值。多個之間用逗號隔開. */ 其餘的詳細解釋以及屬性設定可以到w3c、菜鳥教程等網站去查詢，這裡不多做解釋 |
子視窗
|
<script language="JavaScript"> function viewData(sid, sname) { var student = window.opener; //方法一 // student.document.getElementById("sid").value=sid; // student.document.getElementById("sname").value=sname; //方法二 student.setValue(sid, sname); window.close(); } </script> <body> <table border="1"> <tr> <td>操作</td> <td>學號</td> <td>姓名</td> </tr> <tr> <td><input type="button" value="選擇" id="ss" onclick="viewData('161530254','石騰飛')"></td> <td>161530254</td> <td>石騰飛</td> </tr> <tr> <td><input type="button" value="選擇" onclick="viewData('161530000','超級使用者')"></td> <td>161530000</td> <td>超級使用者</td> </tr> </table> </body> |
在這裡著重解釋一下，關於獲取父視窗的所有內容和物件，在子視窗使用；
|
var student = window.opener; |
Window.opener：網上解釋是：可返回對建立該視窗的 Window 物件的引用，即簡單的來說就是Window.opener返回值是就是代表父視窗可以用如下方式給父視窗的id為sid的元素賦值
|
student.document.getElementById("sid").value=sid; |
當然還有方法二：方法二比較好看，感覺牛逼，其實都一樣
在父窗口裡封裝一個函式
|
function setValue(sid,sname) { document.getElementById("sid").value=sid; document.getElementById("sname").value=sname; } |
在子視窗中呼叫
|
student.setValue(sid, sname); |
千萬要記得無論什麼方法都要記得使用完畢，關閉子視窗
|
window.close(); |