預覽這個功能，就是在你打完字的時候可以先用預覽觀看是否是自己想要的樣
子，廢話不多說看範例就清楚
*/
------------------------------------------------------------------------------------------------
首先建立一個有表單欄位的HTML
代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>父視窗</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//彈跳視窗預覽 function view(){
window.open ('view.html', 'newwindow', 'height=300, width=900, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
}
</script>
</head>
<body>
<!--首先建立幾個表單欄位 -->
<table>
<tr>
<td>
<label>標題</label>
</td>
<td>
<label>
<input type="text" name="Title" id="Title" value=""/>
</label>
</td>
</tr>
<tr>
<td>
<label>名 稱</label>
</td>
<td>
<label>
<input type="text" name="Name" id="Name" value=""/>
</label>
</td>
</tr>
<tr>
<td><input type="button" name="button" value="預覽" onclick="view();"></td>
</tr>
</table>
</body>
</html>接下來製作一個彈跳視窗的HTML
代碼如下:
------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<title>彈跳視窗</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//取得父視窗表單欄位得值
var Title= window.opener.document.getElementById("Title").value;
var Name= window.opener.document.getElementById("Name").value;
//然後把父視窗的值放到view.html裡
function changeText(){
document.getElementById('viewTitle').innerHTML =Title;
document.getElementById('viewName').innerHTML =Name;
}
</script>
</head>
<!-- 網頁一開啟就onload changeText() -->
<body onload="changeText();">
<!--首先建立幾個表單欄位 -->
<table>
<tr>
<td>
<label class="StyleBlackMe">標題：</label>
</td>
<td >
<label id="viewTitle"></label>
</td>
</tr>
<tr>
<td>
<label class="StyleBlackMe">名稱：</label>
</td>
<td>
<label id="viewName"></label>
</td>
</tr>
</table>
</body>
</html>
沒有留言:
張貼留言