Auto resize Iframe

Project web yang dikerjakan beberapa bulan ini masih menyisakan beberapa bug yang belum terselesaikan. Salah satunya adalah penggunaan iframe dalam halaman index.

Sebenarnya mudah menggunakan iframe dalam halaman HTML

<iframe id=”myframe” src=”<? echo “berita/$berita/$berita.htm”; ?>” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″ vspace=”0″ hspace=”0″ style=”overflow:visible; width:100%; display:none”></iframe>

namun, karena konten dalam iframe masih dalam bentuk variabel yang menunjuk ke halaman lain, sedangkan halaman dalam iframe tersebut mempunyai panjang halaman yang berbeda-beda, maka masalah pun muncul.

Tampilan iframe pada web akan memiliki scrollbar yang membuat tidak nyaman bagi para pembaca isi iframe. Setelah mencari di Google dengan keywords “Iframe auto height” dan “Iframe auto resize” ternyata banyak solusinya. Namun solusi-solusi tersebut masih menyisakan bug juga, jika kita menggunakan cross browser. Terkadang dengan menggunakan IE, scrollbar bisa hilang, namun dengan menggunakan Firefox scrollbar masih muncul dan vice versa.

Akhirnya setelah mencari sana-sini dapat juga solusi yang pas untuk masalah tersebut. Solusi didapatkan dari situs Dinamic Drive (lagi) setelah dulu saya mendapatkan solusi untuk dropdown menu yang cukup ciamik dan sesuai dengan keinginan saya.

berikut ini solusi Iframe yang saya dapatkan dari Dinamic Drive dengan menggunakan Iframe SSI script II, tepatnya di URL ini :

Letakkan script berikut ini pada bagian HEAD halaman web (atau sebelum deklarasi tag <iframe> :

<script type=”text/javascript”>

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: [“myframe1”, “myframe2”] or [“myframe”] or [] for none:
var iframeids=[“myframe”]

//Should script hide iframe from browsers that don’t support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide=”yes”

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf(“Firefox”)).split(“/”)[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide==”no”){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display=”block”
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display=”block”
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener(“load”, readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent(“onload”, readjustIframe) // Bug fix line
currentfr.attachEvent(“onload”, readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener(“load”, resizeCaller, false)
else if (window.attachEvent)
window.attachEvent(“onload”, resizeCaller)
else
window.onload=resizeCaller

</script>

setelah itu, deklarasikan tag <iframe> berikut :

<iframe id=”myframe” src=”<? echo “berita/$berita/$berita.htm”; ?>” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″ vspace=”0″ hspace=”0″ style=”overflow:visible; width:100%; display:none”></iframe>

Dan selesailah permasalahan dengan iframe with height variable


Tinggalkan Balasan