Saturday, April 21, 2012

Memuat Iframe setelah Seluruh Halaman telah Termuat

Teknik pertama Saya temukan dari artikel Iframe Loading Techniques and Performance. Cara kerjanya adalah JavaScript akan menciptakan elemen <iframe> dengan nilai src yang telah ditentukan setelah keseluruhan halaman telah selesai dimuat:

//doesn't block the load event
function createIframe() {
    var i         = document.createElement("iframe");
    i.src         = "path/to/file.html";
    i.scrolling   = "auto";
    i.frameborder = "0";
    i.width       = "100%";  // Lebar iframe
    i.height      = "220px"; // Tinggi iframe
    document.getElementById("frameContainer").appendChild(i); // Sisipkan iframe pada elemen yang memiliki ID 'frameContainer'
};

// Check for browser support of event handling capability
if (window.addEventListener) window.addEventListener("load", createIframe, false);
else if (window.attachEvent) window.attachEvent("onload", createIframe);
else window.onload = createIframe;

Setelah itu buat elemen kontainer yang akan menjadi tempat masuknya iframe:

<div id="frameContainer"></div>

Lihat Demo

Teknik ke dua, menggunakan jQuery. Ini adalah teknik yang cukup mudah dipahami karena kita bisa menuliskan elemen <iframe> secara nyata:

$(window).bind("load", function() {
    $('#frameContainer').html('<iframe src="path/to/file.html" width="100%" height="220px" scrolling="auto"></iframe>');
});

Lihat Demo

Labels: , , ,

22 Comments:

At Sunday, April 22, 2012 at 6:18:00 AM GMT+7, Blogger Sinto said...

Memang Lebih Mudah dengan jquery :)

 
At Monday, April 23, 2012 at 4:30:00 PM GMT+7, Blogger Aldy said...

maksud saya misalkan buka post lain di blog ini muncul status loading, itu gmn caranya?

 
At Monday, April 23, 2012 at 5:57:00 PM GMT+7, Blogger Taufik Nurrohman said...

@Sadeva Aldy Pratama Baca: Membuat Efek Animasi Loading dengan JQuery

 
At Monday, April 23, 2012 at 6:30:00 PM GMT+7, Blogger Beben Koben said...

kerennn... :)
kayak preloader!

 
At Saturday, July 14, 2012 at 8:58:00 PM GMT+7, Blogger Unknown said...

Mau nanya nih mas, bisakah tutorial ini diterapkan pada pop up komentar blogger?
jadi hasilnya kaya sistem komentar punya mas ini..

 
At Saturday, July 14, 2012 at 11:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

@laudri rizal eka septian Sudah pernah coba, tapi halaman komentar popupnya tidak bisa tampil kalau dibuka memakai iframe ⇒ http://jsfiddle.net/tovic/jUaG4/7/

 
At Sunday, July 15, 2012 at 2:26:00 PM GMT+7, Blogger Unknown said...

@Taufik Nurrohman Iya mas, tapi kalo yang di ambil cuman hxxps://www.blogger.com/comment.g?blogID=298900102869691923&postID=9043993139723138220 sih bisa mas,,Yang aku bingung lagi gimana ambil bagian yang belakang itu mulai tanda @ sampai penutup tag nya,,

ada pencerahan lagi gak mas?

 
At Sunday, July 15, 2012 at 3:07:00 PM GMT+7, Blogger Taufik Nurrohman said...

@laudri rizal eka septian http://jsfiddle.net/tovic/jUaG4/10/

 
At Monday, July 16, 2012 at 1:18:00 AM GMT+7, Blogger Unknown said...

@Taufik Nurrohman Iya mas, makasih.
jadi kalo mau ambil itu mesti make yang ini ya
@<a href='#' data:comment.anchorName ''>' data:comment.author '</a>#form'

Jadi intinya kalo make container buat muat komentar blogger mesti make fungsi onclick pada tombol balas ato delete, trus kalo buat nyetak itu awalan waktu komen make documentwrite,,, <==== apakah benar ataukah kurang atau salah kaprahkah ?

 
At Monday, July 16, 2012 at 11:20:00 AM GMT+7, Blogger Taufik Nurrohman said...

@laudri rizal eka septian Kurang lebihnya begitu :)

$('a[data-name]').click(function() {
$('#username').val($(this).data('name'));
return false;
});


Demo: http://jsfiddle.net/tovic/jUaG4/12/

 
At Monday, July 30, 2012 at 2:26:00 AM GMT+7, Blogger Unknown said...

kan itu src terdapat di javascript nya..
nah kalau misalkan seperti ini gimana..
<div id="frameContainer" src="path/to/file.html"></div>

jadi gak perlu memasukan URL dalam script lagi.. ??
edit script nya seperti apa,,
kalau misalkan di edit seperti ini emang gak bisa jalan ya..??

<iframe src="path/to/file.html" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen></iframe>

minta pencerahannya mas taufik yang ganteng.. ??? :D

 
At Monday, July 30, 2012 at 3:19:00 AM GMT+7, Blogger Unknown said...

kelebihan... :) maksudnya seperti ini .
<iframe src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen></iframe>

 
At Monday, July 30, 2012 at 12:39:00 PM GMT+7, Blogger Taufik Nurrohman said...

Iya, bisa. Tapi tag <div> tidak boleh dilengkapi dengan atribut src. Di HTML5 kita memakai atribut kostum berupa data-* sebagai alternatif penyimpan data.
Sebagai contoh di sini Saya menggunakan atribut data-src ke semua elemen kontainer untuk menyimpan URL iframe:

<div class="frameContainer" data-src="path/to/file-1.html"></div>
<div class="frameContainer" data-src="path/to/file-2.html"></div>
<div class="frameContainer" data-src="path/to/file-3.html"></div>


Keuntungannya kita bisa memuat lebih dari satu iframe dengan kode JQuery yang lebih sedikit:

$(window).on("load", function() {
$('.frameContainer').each(function() {
$(this).html('<iframe width="90%" height="600" src="' + $(this).data('src') + '" allowfullscreen></iframe>');
});
});


Demo: http://jsfiddle.net/tovic/jUaG4/16/show/

 
At Monday, July 30, 2012 at 8:06:00 PM GMT+7, Blogger Unknown said...

hehe.. saya baru kepikiran klo <div> emang gak bisa di sisipkan cuman src.. terima kasih mas,.. jalan semakin cerah..

jadi kan saya bisa bikin demo juga. tanpa harus membuka tab baru..
soalnya kalo load after page gak di pasang... jadi berat blognya..

 
At Monday, July 30, 2012 at 8:19:00 PM GMT+7, Blogger Unknown said...

ouh ya saya sempat baca reference www.aaronpeters.nl ..
di sana bisa menggunakan Iframe setTimeout() maksudnya gimana.. ? agak rumit nich bahasa inggris saya...
apa load iframe itu di set seperti loadnya pada memuat halaman blog.. ?? apa sama cara kerjanya ...
contoh script seperti ini bisa di pakai gak ?

setTimeout(function() {
$('.frameContainer').each(function() {
$(this).html('<iframe width="90%" height="600" src="' + $(this).data('src') + '" allowfullscreen></iframe>');
});
}, 2000);

 
At Monday, July 30, 2012 at 9:27:00 PM GMT+7, Blogger Taufik Nurrohman said...

Bedanya cuma ada di waktu eksekusi. onload artinya bahwa fungsi akan dieksekusi setelah keseluruhan elemen halaman telah termuat (saat proses loading halaman sudah berhenti), sedangkan setTimeout prinsipnya seperti stop watch: Fungsi akan dieksekusi setelah beberapa waktu yang telah ditentukan berlalu. Untuk kodemu, eksekusi penyisipan elemen iframe akan dilaksanakan dua detik kemudian :W

 
At Thursday, August 30, 2012 at 10:33:00 PM GMT+7, Blogger Unknown said...

masih bingung., cara pasangnya gk tau gan :'(
pusing :p

 
At Wednesday, October 17, 2012 at 10:20:00 PM GMT+7, Anonymous Anonymous said...

Mas,

Kalo Load Halaman Seperti Google Mail Gimana ,

Pengen Sperti Itu ,

Klok Sudah Update Atau ADa Infonya mas,

Share Fbku Yh
www.facebook.com/rizkykurniawan.jensen

 
At Tuesday, December 3, 2013 at 9:36:00 PM GMT+7, Anonymous Anonymous said...

kalau menambahkan class setelah halaman dimuat bagaimana mas taufik...? <3

 
At Tuesday, December 3, 2013 at 9:37:00 PM GMT+7, Anonymous Anonymous said...

[Koreksi]

menambahkan class setelah iframe dimuat...??? <3

 
At Friday, December 6, 2013 at 8:29:00 AM GMT+7, Blogger Taufik Nurrohman said...

<iframe src="http://jsfiddle.net" onload="this.className+=&#39; loaded&#39;;"></iframe>

 
At Monday, December 16, 2013 at 7:59:00 AM GMT+7, Blogger you said...

<div class='image' data:src='//lh3.googleusercontent.com/-i-Qpljch7Dw/AAAAAAAAAAI/AAAAAAAAE8M/LmbPjQJXMZc/s512-c/photo.jpg'> bisakah kita memanggil menampilkan image apabila htmlnya kaya di atas. supaya cara kerjanya seperti pada pemanggilan iframe di atas?

 

Post a Comment

<< Home