?
Solved

Resize an iFrame to avoid scroll bars

Posted on 2007-08-10
14
Medium Priority
?
898 Views
Last Modified: 2008-02-01
Our client's websites use an iframe to show information provided from our website.

We would like to resize the iFrame each time the iFramed page loads so that the iFrame doesn't show scroll bars.  

The catch is that the client's domain (the web site) is different from the iFrame's domain (ours website).  

Does anyone have a method to resize an iFrame when two different domains are involved?
0
Comment
Question by:gdemaria
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 15

Expert Comment

by:danrosenthal
ID: 19673385
Can you modify the parent page to a javascript function?
0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 19673390
typo: ADD a javascript function
0
 
LVL 39

Author Comment

by:gdemaria
ID: 19673473
Hi Dan,
Yes.  The client will load our javascript file (over the internet) onto their page.  This file will create the iFrame and can place any other javascript functions we will need.

The client will place something like this into their page...

<script type="text/javascript"><!--
arw_client = "client1234";
//-->
</script>

<script  src="http://www.mywebsite.com/js/loadiFrame.js" type="text/javascript"></script>

Thanks!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:danrosenthal
ID: 19673937
I have done this before in a single domain environment, I don't think it would be any different in a 2 domain environment.

What I did was add a javascript function to the parent page to resize the iframe. This function had to run AFTER the iframe was fully loaded (so the size is known). Therefore, I also needed to have the iframe page communicate with the parent page when it was completely done loading.

You mention that the "catch" is that you have 2 domains. Do you have something that works on 1 domain but not on 2?

0
 
LVL 39

Author Comment

by:gdemaria
ID: 19674065

I had another question opened and we got pretty far and then failed to get past one issue.   I was thinking I would start over with a different approach (thus the new question) but if you're interested perhaps exploring the original approach would be helpful.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22682588.html

Here it is in a nut shell..

I use a second iFrame on the client's page.  This iFrame is hidden and used solely to pass the needed height after the content iFrame loads.

Here's the sequence of events.

The client's page loads creating two iFrames, the content one and the hidden one.  The content iFrame loads with my page.  When finished loading it changes the source of the hidden iFrame using a URL something like  www.clientSite.com/dummy.htm?height=650
My content iFrame dynamically places the height (650 in this example) onto the end of the source and calls the hidden iFrame.    The hidden iFrame has an on-load event that will resize the content iFrame and pull the height from its source.

This actually works IF the hidden iFrame calls a valid file located on the client's website
  www.clientSite.com/dummy.htm?height=650
This forces me to have the client put a extra dummy file on their site.  I don't want to go there.  It could easily be deleted and cause issues and many other reasons like search engines.

So if I send a link to the hidden iFrame that links to my web site or to a third party site:
   www.mywebsite.com/dummy.cfm?height=650
or   www.google.com/q=xxx&height=650
Then this is hidden iFrame is now owned by a different domain and the javascript to pull the height from the URL will no longer work - security isses keep javascript from reading another domain's URL.

So, what do you think?  New approach or beat this one a bit more?
:)  Thanks for any input..
0
 
LVL 15

Accepted Solution

by:
danrosenthal earned 2000 total points
ID: 19674249
I put together a quick 1 domain solution and tested it on 2 domains and now I understand the issue clearly. After a little searching I found this link which might hold a solution, although it does have a second page on the Client's domain:
http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/

It seems like a simple 1-page solution would be possible if you just use the first response from mplungjan in your last question:
<iframe src="http://www.google.com/" onLoad="this.width=this.document.body.offsetWidth;this.height=this.document.body.offsetHeight"></iframe>

but modified it to run multiple times instead of just once before the iframe is fully loaded.
Depending on how long you think it will take to load the page, for instance, you could set it to run at 1 second intervals for the first 10 seconds, so that the iframe size changes to the correct size as the page loads.



0
 
LVL 39

Author Comment

by:gdemaria
ID: 19674701
Hey Dan,  

 Thanks for giving is some good thought.  The link you provided is a perfect analysis of the situation.  The option #2 is almost identical to what I've implemented.  Not using the extra file on the client's web site is what I need to avoid.  Seems like they didn't find a way around it either.

 I will give your suggestion of using the alternative method a try!

 Seems curious however, typically an onload function fires after a page is loaded completely, at least that's the way it works for the body tag.   Shouldn't it be the same for the iframe ..

0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 19674729
The way I understand it, the problem is that the onload event fires when the PARENT page is done loading and at that point the iframe page may or may not be done loading (and probably is not since it is called half way down the page) as the parent page load is not dependant on the content inside the iframe.

But what you want is for the parent to wait until the iframe page finishes loading.

But, unfortunately as we have seen there is no easy communication possible for the parent to know when the iframe page is done loading. This is why I suggested the 10 second idea which basically keeps trying for several seconds with the goal that the iframe will have finished loading in this time period.

-Dan
0
 
LVL 5

Expert Comment

by:siva_siva
ID: 19875161
Hi,

Below is the javascript to resize the iframe..

 ** deleted copyright content - b0lsc0tt - 26-Oct-2007 **
0
 
LVL 5

Expert Comment

by:siva_siva
ID: 19935360
Hi,

Above code is working or not....
0
 
LVL 1

Expert Comment

by:Computer101
ID: 20208952
Forced accept.

Computer101
EE Admin
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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

807 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