Forum Moderators: open
I am having a problem getting a "iframe auto resize" script to work in all browsers.
**********************************
Here is the script in the head:
<script language="JavaScript">
function resize() {
var iframe = document.all.NAME;
iframe.height=document.frames["NAME"].document.body.scrollHeight;
}
</script>
**************************
Here is the HTML:
<div id="id">
<iframe name="NAME" src="URL" allowtransparency="true" scrolling="no" width="100%" height="100%" frameborder="0" onload="this.height=this.contentDocument.height"></iframe>
</div>
**********************
Here is the CSS:
#id {
margin: 0;
width: 600px;
}
----------------------------
This works in current versions of Firefox, Safari and Chrome.
All versions of IE (6-8) only show 100px of the top of page in the iframe.
Opera will shows up the same as IE but it will scroll.
Anyone out there have any ideas?
Thanks in advance.
Put up a splash page saying, "Site best viewed in Firefox, Safari and Chrome." And include a link to download Firefox.
Give IE users a warning its not friendly for their browsers. Most people use Firefox these days anyway.
tutton: I would love to say "Screw" all IE users and not even give them a link! But this is something that I cannot do. 26% of our visitors are IE users. For the company that this for, 1/4 is way too many possible customers to ignore.
Have you tried switching the scrolling="no" attribute to "yes"? That way IE might at least work the way you say Opera does, even if there is no auto-sizing of the iframe.
Most people use Firefox these days anyway.
Here is the script that I found that fixes the cross browser issue:
//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=["book-reserve"]//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)
//reveal iframe for lower end browsers? (see var above):
if ((document.all ¦¦ document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr){
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
Like I said the only issue now is how can I return the values of the iframe content from a particular host I don't have access to?
