Forum Moderators: open
The script I have only works on reload, not when the buttons are clicked. I have put
onclick="dyniframesize()"
inside the tag for the button links. The script is as follows:
<script type="text/javascript">
var iframeids=["main"]
function dyniframesize() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById){ //begin resizing iframe procedure
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] &&!window.opera){
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
}
document.main.style.height=dyniframe;
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>
It might be that when a user clicks a button to change the src of the iframe, the resize function fires before the page loads.
In IE it is pretty easy to counter this using a while loop at the beginning of the dyniframesize() function:
while(document.frames['myframe'].document.readyState!='complete'){
}
However, this syntax is not supported by NS 6+ or Mozilla. A cross browser method is to put the resize function call in body tag each page that is loaded into the iframe:
<body onload="this.parent.dyniframesize()">
This should make sure that the iframe source page is loaded before the resize function fires.
ajkimoto
Upon further inspection . . . it seems to simply use the dimensions of the page last displayed in the iframe, which is why clicking the same button twice appears to work.
I have the following in my button:
<button onclick="document.getElementById('hidFrame').src=framesource1.htm'">Load Another Frame</button>
and
<body onload="this.parent.dyniframesize()">
as the body tag for each of the pages that I load as the iframe source.
My iframe scales just fine in IE6 and Mozilla when I click the buttons.
I did remove the:
document.main.style.height=dyniframe;
code since it did not apply to my document (but shouldn't this be):
document.main.style.height=dyniframe[i].height?
ajkimoto
First of all: Welcome to Webmaster World
As for any tricks, the most important thing that I found was to call the function in the parent page from the body onload event of the iframe source page.
From then on, it is a matter of using the correct syntax to resize the window correctly, since IE and NS/Mozilla use different syntax.
BTW, The usual procedure around here is to post the code with which you are having problems so that we can check it out.
ajkimoto
Anyway, I missed some small things and got it to work, but:
Do you know why it doesn't work in Opera?
I guess I will be forced to use a script that recognize the browser and in the case of Opera will put scrollbars in the iFrame. Easy to do that when I'm using php I guess.