Window
Di dalam window aktif, kita juga bisa menciptakan window baru melalui method window.open().
<html>
<head>
<title>Demo Open Window</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var subWindow;
/**
* url String alamat url
*/
function openWindow(url) {
if (!subWindow || subWindow.closed) {
var width = 400;
var height = 250;
// Mendapatkan posisi kiri atas (dari layar)
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
// Menetapkan fitur window
var fitur = "width=" + width + ", height=" +
height + ", resizable=0, left=" +
left + ",top=" + top + ",screenX=" +
left + ",screenY=" + top;
// Membuka window
subWindow = window.open(url, "sub", fitur);
} else {
// Sub window sudah dibuka, sehingga tinggal
// memberinya fokus
subWindow.focus();
}
}
//-->
</script>
<a href="#" onclick="openWindow('check_uncheck.html')">open</a>
</body>
</html>
2.Komunikasi Window
Apabila diperlukan, window induk yang menciptakan subwindow juga dapat berkomunikasi dengan window buatannya. Sebagai contoh, buat window induk terlebih dahulu, simpan dengan nama main_window.html.
<html>
<head>
<title>Demo Open Window</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var subWindow;
/**
* url String alamat url
*/
function openWindow(url) {
if (!subWindow || subWindow.closed) {
var width = 400;
var height = 250;
// Mendapatkan posisi kiri atas (dari layar)
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
// Menetapkan fitur window
var fitur = "width=" + width + ", height=" +
height + ", resizable=0, left=" +
left + ",top=" + top + ",screenX=" +
left + ",screenY=" + top;
// Membuka window
subWindow = window.open(url, "sub", fitur);
} else {
// Sub window sudah dibuka, sehingga tinggal
// memberinya fokus
subWindow.focus();
}
}
//-->
</script>
<form action="#">
<input type="text" name="txtsex" />
<a href="#" onclick="openWindow('sub_window.html')">Pilih</a>
</form>
</body>
</html>
Buat subwindow dengan nama sub_window.html.
<html>
<head>
<title>Demo Open Window</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// Set nilai elemen opener
function setSelected(fld) {
// Men-set nilai field txtsex di parent
opener.document.forms[0].txtsex.value = fld.value;
// Tutup window ini (subwindow)
window.close()
}
//-->
</script>
<select name="sex" onchange="setSelected(this);">
<option>--- Pilih ---</option>
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select>
</body>
</html>
Jalankan halaman main_window, kemudian klik link Pilih dan isikan pilihannya.
No comments:
Post a Comment