socross
asked on
Dynamically calculate i frame content height using javascript
Hi
I have an iframe which is pulling in content from a property database, i need to calculate the height of the content so that it has no scrolling windows and dislay all the content.
I have found some Javascript whihc should wokrk but i can get it working, or it would be great if you could suggest a better solution.
Many Thanks
-s-
I have an iframe which is pulling in content from a property database, i need to calculate the height of the content so that it has no scrolling windows and dislay all the content.
I have found some Javascript whihc should wokrk but i can get it working, or it would be great if you could suggest a better solution.
Many Thanks
-s-
JS
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
<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>
HTML
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
<div class="iframe">
<iframe name="ifrm" id="ifrm" src="http://www.housescape.org.uk/cgi-bin/search.pl?demo&style=2&3" width="100%" height="600" scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
</div>
If the site in the iframe is not from the same site as the script you will get access denied.
ASKER
Its for a property site and yoy pay for the content, it all displays ok but the js does not work
As I said. You cannot access the contents or the properties of a frame that contains a page not from the same domain as the script that tries to access it. You can use a proxy:
<div class="iframe">
<iframe name="ifrm" id="ifrm" src="yourServerProcess.php ?url=http% 3A//www.housescape.org.uk/cgi-bin/search.pl%3Fdemo%26style%3D2%263" width="100%" height="600" scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
</div>
and use curl to grab the site
<div class="iframe">
<iframe name="ifrm" id="ifrm" src="yourServerProcess.php
</div>
and use curl to grab the site
ASKER
What do you mean by curl??
ASKER
ok thanks, my sever already has the curllb enabled, but i have not used it before.
1 could you show me how i would use it in this example to display the html from the link.
2. does this then mean that the js would work
Many thanks for all you help so far!!!
--s--
1 could you show me how i would use it in this example to display the html from the link.
2. does this then mean that the js would work
Many thanks for all you help so far!!!
--s--
http://curl.haxx.se/libcurl/php/examples/getpageinvar.html
<?php
//
// The PHP curl module supports the received page to be returned in a variable
// if told.
//
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$_GET["url"]);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
$result=curl_exec ($ch);
curl_close ($ch);
echo $result; // send to the browser
?>
ASKER
Hi
USed the following code to call the frame and your code above for the php page, i get a not found error!!! any ideas?
USed the following code to call the frame and your code above for the php page, i get a not found error!!! any ideas?
<div class="iframe">
<iframe name="ifrm" id="ifrm" src="get_curl.php?url=http%3A//www.housescape.org.uk/cgi-bin/search.pl%3Fdemo%26style%3D2%263" width="100%" height="600" scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
</div>
what not found error and from where? php or javascript?
ASKER
i get a file not found error in the i frame??
ASKER
managed to sort the error, but there are a couple of issues
1. the javascript is not working it stays at the 600px that is defined in the iframe code.
2. the images paths are not correc in the iframe code
ANy ideas??
1. the javascript is not working it stays at the 600px that is defined in the iframe code.
2. the images paths are not correc in the iframe code
ANy ideas??
1. I would need to see the script in action
2. you need to change them in the php of course. Like MS Live and Google and Yahoo does it...
2. you need to change them in the php of course. Like MS Live and Google and Yahoo does it...
ASKER
This is the main page
http://clients.fruit-studios.com/curtisfrank/search.html
The php page (get_curl.php) is an exact copy of the curl page you provided above
What do you mean by 'Like MS Live or Google do it' ????
Many thanks
-s-
For this particular page you need to change all
"window.open('"
to
"window.open('".$url."/";
but you should think of copyright...
I do not get any error messages so I do not know what the problem is with the resize script.
But why not use scroll bars?
"window.open('"
to
"window.open('".$url."/";
but you should think of copyright...
I do not get any error messages so I do not know what the problem is with the resize script.
But why not use scroll bars?
ASKER
Hi
We will be allowed to mess around with the urls as much as we want because this is a service that we will be paying for!
I have got the urls working now but the js for the resize is still not working, have you got any suggestions?
The client has specifically requested no scroll bars so its a requirement of the project.
-s-
We will be allowed to mess around with the urls as much as we want because this is a service that we will be paying for!
I have got the urls working now but the js for the resize is still not working, have you got any suggestions?
The client has specifically requested no scroll bars so its a requirement of the project.
-s-
Try adding
<iframe name="ifrm" id="ifrm" onLoad="setIframeHeight('i frm')"
src="get_curl.php?url=http %3A//www.housescape.org.uk/cgi-bin/search.pl%3Fdemo%26style%3D2%263" width="100%" height="600"
scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
and let me try again?
<iframe name="ifrm" id="ifrm" onLoad="setIframeHeight('i
src="get_curl.php?url=http
scrolling="no" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
and let me try again?
ASKER
It does appear to work but only on safari, mozilla firefox seems to break it??
http://clients.fruit-studios.com/curtisfrank/search.html
-s-
http://clients.fruit-studios.com/curtisfrank/search.html
-s-
Works great in FF 2.0.09 on windows once I cleared my cache
ASKER
yeah i forgot to clear my cache too!!!
Its working great now thanks, but i have a few concerns if people do not have js enabled, i still need it to be able to scroll, any way i could change this with the js ( or have scrolling as on by default and then set it to no with js??)
-s-
Its working great now thanks, but i have a few concerns if people do not have js enabled, i still need it to be able to scroll, any way i could change this with the js ( or have scrolling as on by default and then set it to no with js??)
-s-
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great Stuff
needed to add the onLoad="setIframeHeight('i frm')" to the script version though!
Thanks for all your help.
Many thanks
-s-
needed to add the onLoad="setIframeHeight('i
Thanks for all your help.
Many thanks
-s-
ASKER
Took some battling but got there, good work!!!
Oops. yes, cut and pasted from the wrong iframe code