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>');
});
22 Komentar
Unknown
Memang Lebih Mudah dengan jquery :)
Aldy
maksud saya misalkan buka post lain di blog ini muncul status loading, itu gmn caranya?
Taufik Nurrohman
@Sadeva Aldy Pratama Baca: Membuat Efek Animasi Loading dengan JQuery
Beben Koben
kerennn... :)
kayak preloader!
Unknown
Mau nanya nih mas, bisakah tutorial ini diterapkan pada pop up komentar blogger?
jadi hasilnya kaya sistem komentar punya mas ini..
Taufik Nurrohman
@laudri rizal eka septian Sudah pernah coba, tapi halaman komentar popupnya tidak bisa tampil kalau dibuka memakai iframe ⇒ http://jsfiddle.net/tovic/jUaG4/7/
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?
Taufik Nurrohman
@laudri rizal eka septian http://jsfiddle.net/tovic/jUaG4/10/
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 ?
Taufik Nurrohman
@laudri rizal eka septian Kurang lebihnya begitu :)
Demo: http://jsfiddle.net/tovic/jUaG4/12/
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..??
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 atributsrc
. Di HTML5 kita memakai atribut kostum berupadata-*
sebagai alternatif penyimpan data.Sebagai contoh di sini Saya menggunakan atribut
data-src
ke semua elemen kontainer untuk menyimpan URL iframe:Keuntungannya kita bisa memuat lebih dari satu iframe dengan kode JQuery yang lebih sedikit:
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 ?
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), sedangkansetTimeout
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 :WUnknown
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
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?