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>
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>');
});
Labels: JavaScript, jQuery, Lanjutan, Potongan
21 Comments:
Memang Lebih Mudah dengan jquery :)
By Sinto, at Sunday, April 22, 2012 at 6:18:00 AM GMT+7
maksud saya misalkan buka post lain di blog ini muncul status loading, itu gmn caranya?
By Aldy, at Monday, April 23, 2012 at 4:30:00 PM GMT+7
@Sadeva Aldy Pratama Baca: Membuat Efek Animasi Loading dengan JQuery
By Taufik Nurrohman, at Monday, April 23, 2012 at 5:57:00 PM GMT+7
kerennn... :)
kayak preloader!
By Beben Koben, at Monday, April 23, 2012 at 6:30:00 PM GMT+7
Mau nanya nih mas, bisakah tutorial ini diterapkan pada pop up komentar blogger?
jadi hasilnya kaya sistem komentar punya mas ini..
By Unknown, at Saturday, July 14, 2012 at 8:58:00 PM GMT+7
@laudri rizal eka septian Sudah pernah coba, tapi halaman komentar popupnya tidak bisa tampil kalau dibuka memakai iframe ⇒ http://jsfiddle.net/tovic/jUaG4/7/
By Taufik Nurrohman, at Saturday, July 14, 2012 at 11:30:00 PM GMT+7
@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?
By Unknown, at Sunday, July 15, 2012 at 2:26:00 PM GMT+7
@laudri rizal eka septian http://jsfiddle.net/tovic/jUaG4/10/
By Taufik Nurrohman, at Sunday, July 15, 2012 at 3:07:00 PM GMT+7
@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 ?
By Unknown, at Monday, July 16, 2012 at 1:18:00 AM GMT+7
@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/
By Taufik Nurrohman, at Monday, July 16, 2012 at 11:20:00 AM GMT+7
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
By Unknown, at Monday, July 30, 2012 at 2:26:00 AM GMT+7
kelebihan... :) maksudnya seperti ini .
<iframe src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen></iframe>
By Unknown, at Monday, July 30, 2012 at 3:19:00 AM GMT+7
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/
By Taufik Nurrohman, at Monday, July 30, 2012 at 12:39:00 PM GMT+7
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..
By Unknown, at Monday, July 30, 2012 at 8:06:00 PM GMT+7
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);
By Unknown, at Monday, July 30, 2012 at 8:19:00 PM GMT+7
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
By Taufik Nurrohman, at Monday, July 30, 2012 at 9:27:00 PM GMT+7
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
By Anonymous, at Wednesday, October 17, 2012 at 10:20:00 PM GMT+7
kalau menambahkan class setelah halaman dimuat bagaimana mas taufik...? <3
By Anonymous, at Tuesday, December 3, 2013 at 9:36:00 PM GMT+7
[Koreksi]
menambahkan class setelah iframe dimuat...??? <3
By Anonymous, at Tuesday, December 3, 2013 at 9:37:00 PM GMT+7
<iframe src="http://jsfiddle.net" onload="this.className+=' loaded';"></iframe>
By Taufik Nurrohman, at Friday, December 6, 2013 at 8:29:00 AM GMT+7
<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?
By you, at Monday, December 16, 2013 at 7:59:00 AM GMT+7
Post a Comment
<< Home