canadianjameson
05-30-2004, 06:04 PM
I was recently desperately looking for a method of making my IFRAME's height variable based on the height of the page loaded into it, because it was cutting off the tables i had loading into it... and like a gift from god, jfreak53 posted this for me. I figured i'd share it publically so that everyone could use it if needed.
Cheers,
-- Jameson
Ok, this took me almost all night to find on the net, but I found a site that had this in JavaScript, here it is:
In the main page that has the Iframe you put this:
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";
}
}
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
That goes in the head of the doc, then this is put in every link, like this, example:
<a href="doc.html" onclick="return loadIframe('main', this.href)">
The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('main');
}
</script>
That's inside the head part of the docs then this is added to the body part like this:
<body onload="goSetHeight()">
Cheers,
-- Jameson
Ok, this took me almost all night to find on the net, but I found a site that had this in JavaScript, here it is:
In the main page that has the Iframe you put this:
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";
}
}
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
That goes in the head of the doc, then this is put in every link, like this, example:
<a href="doc.html" onclick="return loadIframe('main', this.href)">
The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('main');
}
</script>
That's inside the head part of the docs then this is added to the body part like this:
<body onload="goSetHeight()">