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?

  • Taufik Nurrohman

  • 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 :)

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

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

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