Link to home
Start Free TrialLog in
Avatar of gdemaria
gdemariaFlag for United States of America

asked on

Resize an iFrame to avoid scroll bars

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?
Avatar of danrosenthal
danrosenthal

Can you modify the parent page to a javascript function?
typo: ADD a javascript function
Avatar of gdemaria

ASKER

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


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.

https://www.experts-exchange.com/questions/22682588/iFrame-between-two-servers-preventing-scroll-bars.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..
ASKER CERTIFIED SOLUTION
Avatar of danrosenthal
danrosenthal

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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 ..

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

Below is the javascript to resize the iframe..

 ** deleted copyright content - b0lsc0tt - 26-Oct-2007 **
Hi,

Above code is working or not....
Forced accept.

Computer101
EE Admin