Apabila kita perlu membuka page baru tanpa menganggu page sedia ada, biasanya kita akan menggunakan kaedah pop-up. Di bawah adalah contoh mudah bagi situasi sebegini.
Secara ringkasnya, terdapat dua page iaitu main page (index.html) dan child page (test.html). Main page akan berikan akses untuk buka page secara popup, manakala child bersedia untuk ditutup tanpa menganggu page utama.
Pada page index.html, gunakan window.open() dengan nilai atribut _blank supaya ia buka page baru. Nilai height dan width juga ikut saiz screen sedia ada. Jadi, ia akan buka fullscreen. Jika mahu setkan pada saiz tertentu, masukkan sahaja nilai yang kita mahu. Sebagai contoh, height=570,width=520. Ada beberapa lagi spec yang boleh dimasukkan seperti scrollbars, location dan lain-lain.
/* index.html */ <!DOCTYPE html> <html> <head> </head> <body> <p>Ini adalah parent page.</p> <a onclick="window.open('test.html', '_blank', 'height='+screen.height+', width='+screen.width);">Buka Page</a> </body> </html>
Pada child page iaitu test.html, sediakan akses untuk menutup page dirinya sendiri iaitu menggunakan code self.close().
/* test.html */ <html> <head> </head> <body> <p>Ini adalah child page.</p> <input type="button" value="Close this window" onclick="self.close()"><br> </body> </html>
Bagi arahan self.close() ini, ia hanya berfungsi sekiranya ia dipanggil melalui parent page. Jika dibuka secara terus dengan menaip di url, ianya tidak berfungsi.
0 comments:
Post a Comment