DTE :]

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: , , ,

21 Comments:

Post a Comment



<< Home