Mecha versi 2.6.3 sudah dirilis!

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

Load Iframe after Onload

22 Komentar

Unknown

Memang Lebih Mudah dengan jquery :)

Aldy

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

Unknown

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

Unknown

@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?

Unknown

@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 ?

Unknown

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

Unknown

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

Taufik Nurrohman

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/

Unknown

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..

Unknown

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);

Taufik Nurrohman

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

Unknown

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

Anonim

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

Anonim

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

Anonim

[Koreksi]

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

Taufik Nurrohman

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

you

<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?

Komentar telah ditutup.