Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamically calculate i frame content height using javascript

Posted on 2007-11-16
23
Medium Priority
?
7,277 Views
Last Modified: 2010-04-21
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-
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>

Open in new window

0
Comment
Question by:socross
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 12
  • 11
23 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20298074
If the site in the iframe is not from the same site as the script you will get access denied.
0
 
LVL 1

Author Comment

by:socross
ID: 20298186
Its for a property site and yoy pay for the content, it all displays ok but the js does not work
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20298304
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
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 1

Author Comment

by:socross
ID: 20298598
What do you mean by curl??

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20298690
0
 
LVL 1

Author Comment

by:socross
ID: 20298821
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--
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20298974
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
?>

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 20305199
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?


        <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>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20307200
what not found error and from where? php or javascript?
0
 
LVL 1

Author Comment

by:socross
ID: 20307375
i get a file not found error in the i frame??
0
 
LVL 1

Author Comment

by:socross
ID: 20307397
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??
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20307720
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...
0
 
LVL 1

Author Comment

by:socross
ID: 20308577

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-
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20311396
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?
0
 
LVL 1

Author Comment

by:socross
ID: 20311609
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-

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20311831
Try adding

         <iframe name="ifrm" id="ifrm" onLoad="setIframeHeight('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>
 

and let me try again?
0
 
LVL 1

Author Comment

by:socross
ID: 20312280
It does appear to work but only on safari, mozilla firefox seems to break it??

http://clients.fruit-studios.com/curtisfrank/search.html

-s-
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20312323
Works great in FF 2.0.09 on windows once I cleared my cache
0
 
LVL 1

Author Comment

by:socross
ID: 20312486
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-
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20312755
Yes
<div class="iframe">
<script>
document.write('<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>')
</script>
<noscript>
<iframe src="http://www.housescape.org.uk/cgi-bin/search.pl?demo&style=2&3" width="100%" height="600" frameborder="0">Sorry, your browser doesn't support iframes.</iframe>
</noscript>
</div>

Open in new window

0
 
LVL 1

Author Comment

by:socross
ID: 20313347
Great Stuff

needed to add the onLoad="setIframeHeight('ifrm')" to the script version though!

Thanks for all your help.

Many thanks

-s-

0
 
LVL 1

Author Closing Comment

by:socross
ID: 31409543
Took some battling but got there, good work!!!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20314554
Oops. yes, cut and pasted from the wrong iframe code
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question