Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Iframe Preloader

jQuery Iframe Preloader

Saya ingin membahas mengenai pertanyaan dari The7Bloggers tentang bagaimana caranya menampilkan iframe pada kotak dialog, tapi isi dari iframe tersebut harus dimuat hanya saat kotak dialog ditampilkan:

The7Bloggers pada Alam Perwira di Membuat Kotak Dialog dengan jQuery:

Mas gimana kalau 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 memiliki widget Buku Tamu tersembunyi di sidebar yang terbuat dari elemen <iframe>. Tapi kita harap kita bisa menunda pemuatan buku tamu tersebut sampai seorang pengunjung mengeklik tombol pembuka, tautan atau apapun yang menjadi pemicu tampilnya buku tamu tersebut.

Untuk memuat iframe pada saat suatu pemicu diklik dapat dilakukan dengan dua metode. Pertama, kita bisa membuat elemen <iframe> dengan atribut src kosong, lalu kita set nilai atribut src kosong tersebut saat 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 bisa menyisipkan elemen <iframe> pada sebuah kontainer (katakanlah #frameContainer) saat 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, saat kita ingin membatalkan proses muat iframe, kita bisa melakukannya dengan cara menghilangkan elemen tersebut seperti ini:

$('button#batal').click(function() {
    $('iframe#dynamicFrame').remove();
});

Membatalkan proses muat iframe pada metode pertama sebenarnya juga bisa 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 bahan 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 seperti ini:

<!-- Start Dialog Box -->
<div id="kotak-dialog">
<h3 class="title">Kotak Dialog<a href="#" class="close">&#215;</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 kode di atas bisa Anda melihat bahwa Saya menyisipkan elemen #iframeContainer. Kita akan menggunakan itu sebagai tempat iframe yang akan kita sisipkan dengan jQuery. Berikutnya perhatikan kode ini:

//Tampilkan kotak dialog saat .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 dialog dan overlay saat tombol pemicu (.open-dialog) diklik. tapi yang kita harapkan adalah setelah kotak dialog tampil, jQuery akan mencari elemen #iframeContainer di dalamnya dan setelah itu akan menyisipkan elemen <iframe> pada elemen tersebut. Itu bisa dilakukan dengan memodifikasi kodenya menjadi seperti 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 adalah objek yang menyatakan nilai atribut href pada tautan yang diklik. Kita akan mengunakan pemicu berupa tautan agar kita bisa menyimpan URL iframe pada tautan tersebut, sehingga dengan satu kotak dialog saja, kita bisa 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 dialog dan singkirkan iframe:

// Saat tombol penutup diklik...
$('#kotak-dialog .close').click(function() {
    // Hilangkan kotak dialog 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">&#215;</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 dibuat dengan sebuah elemen tautan yang memiliki kelas .open-dialog seperti ini:

<a class="open-dialog" href="//www.namasitus.com">Buka Kotak Dialog</a>

Lihat Demo

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 44 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!