469,294 Members | 1,571 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,294 developers. It's quick & easy.

Having 2 "out of domain" pages in one aspx page with dynamic heights

Hi Team,

I have to adjust two pages which are provided by 2 diff. services based on some query string, as of now I am using iframes but could not set the height dynamically. Both the child pages can came up with any height.

and iframes are useless in this case as I have to set some height or else it will take the defualt value for height property.

I tried to set it thru java script and css but got the "access denied error" as java script could not do anything outside domian/application.

Is there any other control which can be useful in such cases. If yes, how can we use it.

Thanks,
Manik
Sep 17 '09 #1
33 2786
Frinavale
9,735 Expert Mod 8TB
I don't know why you're having a problem.
I was able to set the height and width of an iframe with both CSS and javascript:

Expand|Select|Wrap|Line Numbers
  1. <iframe id="theiframe" src="http://bytes.com/topic/asp-net/answers/874341-having-2-out-domain-pages-one-aspx-page-dynamic-heights#post3512844" style="height:50px; width:50px;" ></iframe>
  2.  
  3. <script type="text/javascript">
  4.    var theiframe = document.getElementById('theiframe');
  5.    theiframe.style.width="300px";
  6.    theiframe.style.height="500px";
  7. </script>
-Frinny
Sep 18 '09 #2
we need to set the height as per the content of the child page..you hav set it 500px..it will endup witha scroll if the child page is more thn 500px which we dont want....
Sep 18 '09 #3
ssnaik84
149 100+
you have to set height and width 100%
try this

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3. <iframe scrolling=auto id=rf src="http://bytes.com/topic/asp-net/answers/874341-having-2-out-domain-pages-one-aspx-page-dynamic-heights#post3512844" frameborder=0 allowtransparency=true style="width:100%;height:100%"></iframe>
  4. </body>
  5. </html>
Sep 18 '09 #4
its perfect whn both child pages has full content but its showing the full page evenwhen first child page has only half content..in that ways half of the page is blank
Sep 18 '09 #5
Frinavale
9,735 Expert Mod 8TB
What is the logic is for sizing the child page then?
Sep 18 '09 #6
child page should take as much space as much the content it has..lets say if the content is till 200px and rest of the page is blank..it should take up to 200px only and second child page should start from there..

right now by using above code - child page is taking 1000px and thn second child page is rendering..tht directly menas that there is a 800px white space between the two content
Sep 18 '09 #7
ssnaik84
149 100+
hmm... it's look like you are trying to merge multiple html files into one :)
Sep 18 '09 #8
Frinavale
9,735 Expert Mod 8TB
Have you considered using percentages instead of pixels for your heights?
How is this dynamic? What is setting the heights?
Sep 18 '09 #9
yup, I am getting 2 output in asp and aspx format thru a webservice and as of now could not find anything to merge it
Sep 18 '09 #10
Frinavale
9,735 Expert Mod 8TB
Oh wait I think I see your problem now...
You want to resize the IFrame according to the content within it...
You can't get the "size" of the content because it's in the IFrame...hmmm

I wonder if you could use cookies?
Sep 18 '09 #11
yes Frinavale, as i said percentage will be static again...
Sep 18 '09 #12
Frinavale
9,735 Expert Mod 8TB
I'm going to move your question to the JavaScript forum. I'm not entirely sure how you would solve this problem and I think they might know (I'm certainly not a JavaScript expert).

I think that using a combination of Cookies and the iframes' onload event will do the trick though.

When the content is loaded in the iframe it'll have to set a cookie that indicates it's physical size....the onload event is fired whenever content is loaded in the iframe, at that point your code should check for the cookie and resize the iframe accordingly.

The trick will be timing though.....
Sep 18 '09 #13
cookies..how can we use cookies for smthing like this..

do we have anything thing which can be used to merge multiple page in one aspx page?
Sep 18 '09 #14
Frinavale
9,735 Expert Mod 8TB
Well, you could convert the aspx pages into "content pages" and use a master page. See if you could load the 2 content pages into 2 different placeholders in the master page.
Sep 18 '09 #15
Frinavale - ur idea is sounding do-able but not sure how esay will it be..
Sep 18 '09 #16
Frinavale
9,735 Expert Mod 8TB
Which idea, the MasterPage/content page or the Cookies?
Sep 18 '09 #17
Cookie one..please let me know if you has any example of that
Sep 18 '09 #18
Frinavale
9,735 Expert Mod 8TB
Yeah I've never done it before... don't know if it's even possible (hehe)

I can give it a try but I haven't really done that much with cookies in JavaScript (other than creating a cookie to test if the browser has cookies enabled).
Sep 18 '09 #19
lolz..let me try it too. I will get back to you on this..thanks anyway
Sep 18 '09 #20
Frinavale
9,735 Expert Mod 8TB
OK we don't need to use cookies at all.
There's an easier way to do this.

The following code will grab the clientHeight (or offsetHeight) of the <body> tag in the iframe.

It isn't perfect though...there's some sort of padding thing going on that this code doesn't take into consideration so the scroll bar still shows up. I have added something like 20 to the newheight value to compensate for this but for the larger page that I'm testing with it still needs more:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head></head>
  4. <body>
  5.   <script type="text/javascript">
  6.     function autoResize(element)
  7.     {
  8.       var newheight;
  9.       if(document.clientHeight) {
  10.         newheight = element.contentWindow.document.body.clientHeight + 20;
  11.       }else{
  12.         newheight = element.contentWindow.document.body.offsetHeight + 20;
  13.       }
  14.       element.style.height = newheight +"px";
  15.      }
  16.   </script>
  17.   <iframe src="testing.html" id="testing" onload="autoResize(this)"></iframe>
  18.   <iframe src="HideShowColumnsTest.html" onload="autoResize(this)"></iframe>
  19. </body>
  20. </html>
-Frinny
Sep 18 '09 #21
Frinavale
9,735 Expert Mod 8TB
Ahh, for the pages that you're loading, set the <body> tag's style to "margin:0px; padding:0px".
Sep 18 '09 #22
Ahh, for the pages that you're loading, set the <body> tag's style to "margin:0px; padding:0px" and the problem will be solved.
the child pages are coming out of domain..can't change them
Sep 18 '09 #23
The following code will grab the clientHeight (or offsetHeight) of the <body> tag in the iframe.
..this code did change the height to default height that is around 200px..that means..it did not work..
Sep 18 '09 #24
Frinavale
9,735 Expert Mod 8TB
It didn't work?
Really?

It worked for me (FireFox and IE8)......
Sep 18 '09 #25
Frinavale
9,735 Expert Mod 8TB
What are the url's of the pages that you're loading?
Sep 18 '09 #26
It didn't work?
Really?

It worked for me (FireFox and IE8)......
Yes it did not work for me..I tried in IE6 and FF
Sep 18 '09 #27
both the applications are on an intranet and are as follows:

server.domain.com/search/fhaseservice/default.asp

server.domain.com/scripts/rfx.exe/Webinator/search?db=db&uq=&pr=Web&query=
Sep 18 '09 #28
Frinavale
9,735 Expert Mod 8TB
Oh that wont work for me...I can't get into your intranet from here....
Sep 18 '09 #29
Frinavale
9,735 Expert Mod 8TB
I tested using the bytes url (across domain) and had the same problem...
My script worked because I was in the same domain...sorry

Hmmm...

Do you have access to code of the web pages that loading?
Sep 18 '09 #30
Frinavale
9,735 Expert Mod 8TB
I have a working "Cookies" solution.

The thing is you'll have to edit the pages that you are loading into the iframes.

I only worked with 1 iframe but you'll have to modify the code so that a cookie is set by each page you're loading and that the code loading the iframe retrieves these cookies and sets the sizes accordingly.

So, like I said I only worked with 1 iframe.
I set a cookie called "heightCookie" to the physical height of the window + the scroll height of the window (the height of the content) in the page I was loading in the iframe:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function setCookie()
  5.   var value = document.body.offsetHeight + document.body.scrollHeight+ "px";
  6.   var c_name = "heightCookie";
  7.   document.cookie= c_name + "=" + value;
  8. }
  9. </script>
  10. <body onload="setCookie();">
  11.  ......
  12. </body>
  13. </html>
Then in the page that loads the HTML into the iframe I retrieve the heightCookie's value during the iframe's onload event and set the height of the iframe:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function getHeight()
  5. { var c_name = "heightCookie";
  6.   if (document.cookie.length>0)
  7.   {
  8.    c_start=document.cookie.indexOf(c_name + "=");
  9.    if (c_start!=-1)
  10.    { 
  11.      c_start=c_start + c_name.length+1 ;
  12.      c_end=document.cookie.indexOf(";",c_start);
  13.      if (c_end==-1) c_end=document.cookie.length
  14.      return unescape(document.cookie.substring(c_start,c_end));
  15.    } 
  16.   }
  17.  return "";
  18. }
  19.  
  20. function autoResize(element)
  21. {  
  22.     element.style.height = getHeight();
  23. }
  24. </script>
  25. </head>
  26. <body>
  27. <iframe onload="autoResize(this);" src="HideShowColumnsTest.html" id="testing"></iframe>
  28. </body>
  29. </html>
It would probably be a good idea to load save cookies named according the the page name...and during the onload event pass the page name into the "autoResize" method...which passes it onto the getHeight method so that it retrieves the proper cookie for the iframe it's modifying.

I haven't tested it across domains...I hope it works for you.
Sep 18 '09 #31
acoder
16,027 Expert Mod 8TB
Unless you have control of both domains, you're going to have problems. JavaScript doesn't normally allow access to other domains. The probable easiest solution is to serve the pages from your own domain. How do you do that? Use server-side code to request the pages using a Http request.
Sep 19 '09 #32
I tried your example on my local system Frinavale. It is close but still its not giving the accurate height. It is still returing 200px when I do not have anything in the child page.
Sep 22 '09 #33
Frinavale
9,735 Expert Mod 8TB
What did you use to capture the size in the page that you're loading in the iframe?
It seems that if you use the document.body.offsetHeight alone it will return you the iframe's height. You have to add this to the document.body.scrollHeight to determine how large the content actually is.

-Frinny
Sep 22 '09 #34

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Thomas John Youngquist | last post: by
2 posts views Thread by James | last post: by
1 post views Thread by Robin Dindayal | last post: by
15 posts views Thread by David | last post: by
1 post views Thread by Daniel Michaeloff | last post: by
6 posts views Thread by Gordo | last post: by
4 posts views Thread by jmacduff | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by harlem98 | last post: by
1 post views Thread by Geralt96 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.