Saya ingin membahas mengenai pertanyaan dari The7Bloggers wacana bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya ketika kotak obrolan ditampilkan:
The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQuery:
Mas gimana jikalau buat iframe, tapi waktu blognya load iframenya ndak ikut load?
Loadnya itu ketika tombol pembuka jQuery-nya di klik?
Pertanyaan bagus. Ini mengenai efisiensi muat halaman. Katakanlah, kita mempunyai widget Buku Tamu tersembunyi di sidebar yang terbuat dari elemen <iframe>. Tapi kita harap kita sanggup menunda pemuatan buku tamu tersebut hingga seorang pengunjung mengeklik tombol pembuka, tautan atau apapun yang menjadi pemicu tampilnya buku tamu tersebut.
Untuk memuat iframe pada ketika suatu pemicu diklik sanggup dilakukan dengan dua metode. Pertama, kita sanggup menciptakan elemen <iframe> dengan atribut src kosong, kemudian kita set nilai atribut src kosong tersebut ketika sebuah tombol diklik:
HTML
<button>Klik!</button> <iframe id='dynamicFrame' src=''><iframe>jQuery
$('button').click(function() { $('iframe#dynamicFrame').attr('src', 'http://www.namasitus.com'); });Ke dua, kita sanggup menyisipkan elemen <iframe> pada sebuah kontainer (katakanlah #frameContainer) ketika sebuah tombol diklik:
HTML
<button>Klik!</button> <div id='frameContainer'><div>jQuery
$('button').click(function() { $('#frameContainer').html('<iframe id="dynamicFrame" src="//www.namasitus.com"></iframe>'); });Saya rasa metode yang ke dua ini lebih baik. Karena setidaknya, ketika kita ingin membatalkan proses muat iframe, kita sanggup melakukannya dengan cara menghilangkan elemen tersebut menyerupai ini:
$('button#batal').click(function() { $('iframe#dynamicFrame').remove(); });Membatalkan proses muat iframe pada metode pertama bekerjsama juga sanggup dilakukan dengan cara menghapus atribut src pada elemen tersebut:
$('button#batal').click(function() { $('iframe#dynamicFrame').removeAttr('src'); });Tapi terkadang metode itu tidak bekerja dengan baik dan iframe masih tetap akan melanjutkan proses muat meskipun tombol pembatal sudah diklik.
Memadukan Konsep jQuery Dialog dengan Iframe Preloader
Sekarang kita akan meletakkan iframe tersebut ke dalam kotak dialog. Di sini Saya tidak akan mencari materi terlalu jauh. Kita gunakan saja jQuery Dialog yang pernah Saya buat di posting ini untuk kemudian akan kita isi dengan elemen <iframe> di dalamnya.
Pertama-tama kita harus memodifikasi kerangkanya menjadi menyerupai ini:
<!-- Start Dialog Box --> <div id="kotak-dialog"> <h3 class="title">Kotak Dialog<a href="#" class="close">×</a></h3> <div class="isi-dialog"><div id="iframeContainer"></div> <div class="button-wrapper"> <button class="close">Tutup Kotak Dialog</button> </div> </div> </div> <div id="dialog-overlay"></div> <!-- End Dialog Box -->Pada instruksi di atas sanggup Anda melihat bahwa Saya menyisipkan elemen #iframeContainer. Kita akan memakai itu sebagai kawasan iframe yang akan kita sisipkan dengan jQuery. Berikutnya perhatikan instruksi ini:
//Tampilkan kotak obrolan ketika .open-dialog diklik $('.open-dialog').click(function() { $('#kotak-dialog').show(); $('#dialog-overlay').fadeTo("normal", 0.4); return false; });Kode tersebut hanya berfungsi untuk menampilkan kotak obrolan dan overlay ketika tombol pemicu (.open-dialog) diklik. tapi yang kita harapkan yaitu sesudah kotak obrolan tampil, jQuery akan mencari elemen #iframeContainer di dalamnya dan sesudah itu akan menyisipkan elemen <iframe> pada elemen tersebut. Itu sanggup dilakukan dengan memodifikasi kodenya menjadi menyerupai ini:
$('.open-dialog').click(function() { $('#kotak-dialog').show().find('#frameContainer').html('<iframe src="' + this.href + '"></iframe>'); $('#dialog-overlay').fadeTo("normal", 0.4); return false; });this.href yaitu objek yang menyatakan nilai atribut href pada tautan yang diklik. Kita akan mengunakan pemicu berupa tautan biar kita sanggup menyimpan URL iframe pada tautan tersebut, sehingga dengan satu kotak obrolan saja, kita sanggup membuka lebih banyak halaman di dalam iframe.
Untuk membatalkan proses muat tidak berbeda dari apa yang sudah Saya nyatakan di atas. Saat tombol .close diklik, sembunyikan kotak obrolan dan singkirkan iframe:
// Saat tombol epilog diklik... $('#kotak-dialog .close').click(function() { // Hilangkan kotak obrolan dengan efek fade-out $('#kotak-dialog').fadeOut('normal', function() { // Setelah itu singkirkan iframe di dalamnya $('iframe', this).remove(); }); // Sembunyikan overlay $('#dialog-overlay').hide(); return false; });Kode Selengkapnya
HTML
<!-- Start Dialog Box --> <div id="kotak-dialog"> <h3 class="title">Kotak Dialog<a href="#" class="close">×</a></h3> <div class="isi-dialog"> <div id="iframeContainer"></div> <div class="button-wrapper"> <button class="close">Tutup Kotak Dialog</button> </div> </div> </div> <div id="dialog-overlay"></div> <!-- End Dialog Box -->CSS
#kotak-dialog { position:absolute; top:20%; left:50%; margin:0px 0px 0px -200px; width:400px; height:auto; background-color:#fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); z-index:1000; display:none; } #kotak-dialog *:focus { outline:none; } #kotak-dialog h3.title { background-color:#3B5998; padding:10px 15px; color:#fff; font:normal 16px Arial,Sans-Serif; margin:0px 0px 0px 0px; position:relative; } #kotak-dialog h3.title a { position:absolute; top:10px; right:15px; color:#fff; text-decoration:none; cursor:pointer; } #kotak-dialog .isi-dialog { margin:15px; font:normal 12px Arial,Sans-Serif; } #kotak-dialog .button-wrapper { padding:10px 15px 0px; border-top:1px solid #ddd; margin-top:15px; } #kotak-dialog .button-wrapper button { background-color:#FF0C39; border:none; font:bold 12px Arial,Sans-Serif; color:#fff; padding:5px 10px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; } #kotak-dialog .button-wrapper button:hover { background-color:#aaa; } #dialog-overlay { position:fixed !important; position:absolute; z-index:999; top:0px; right:0px; bottom:0px; left:0px; background-color:#000; display:none; } /* Iframe */ #iframeContainer iframe { width:100%; height:300px; border:none; background-color:#ccc; overflow:auto; }jQuery
//<![CDATA[ $(function() { $('.open-dialog').click(function() { $('#kotak-dialog').show().find('#iframeContainer').html('<iframe src="' + this.href + '"></iframe>'); $('#dialog-overlay').fadeTo(400, 0.8); return false; }); $('#kotak-dialog .close').click(function() { $('#kotak-dialog').fadeOut('normal', function() { $('iframe', this).remove(); }); $('#dialog-overlay').hide(); return false; }); }); //]]>Elemen pemicu dibentuk dengan sebuah elemen tautan yang mempunyai kelas .open-dialog menyerupai ini:
<a class="open-dialog" href="//www.namasitus.com">Buka Kotak Dialog</a>