Back To Programming / Scripting / Coding Forum

Cross-Domain iFrame

  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 20th, 2009, 2:32 pm

I have pageA on domainA that needs to load a pageB on domainB.

I used an iFrame. Simple enough. Sweet works great.

pageB on domainB loads pageB2 on domainB inside of my iFrame on pageA. Again that's exactly what I want.

The problem is pageB is 2000px tall. So I set my iframe to be 2000px tall. BUT, pageB2 is 800px tall. So end up with 1200px of whitespace. Sure I could set the iframe to 800px tall and turn on scrolling, but I don't want scrolling.

For way too long I've been toying with dynamically resizing the iFrame using javascript. If you find a javascript resizing "solution" on Google I've probably tried it. The problem there is the javascript security errors for crossing domains and browser compatibility namely IE.

AJAX doesn't do cross domain either, right?

I want something a div, whatever, that will load the content from pageB and resize to fit pageB2 when that is loaded. I want this element to live on my pageA.

Any thoughts suggestions would be greatly appreciated.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 20th, 2009, 2:32 pm

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post August 20th, 2009, 2:53 pm

I don't understand why the javascript approaches wouldn't work. You can use the iframe's DOM to figure out the size of the page and then tweak the iframe's css to match? I'd post something, but you said you've tried it, so maybe you can share what you tried and we can have a look?
I'd love to change the world, but they won't give me the source code.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 21st, 2009, 5:16 am

Proxy iFrames: (failed)
http://shouldersofgiants.co.uk/Blog/pos ... nique.aspx

Polling: (failed)
http://geekswithblogs.net/rashid/archiv ... 03518.aspx

Proxy & Polling: (failed)
http://softwareas.com/cross-domain-comm ... th-iframes

Cookie: (just found this one...trying it now)
http://www.fitchett.me/?p=150

If anyone has other ideas, I am all ears!
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post August 21st, 2009, 6:35 am

You may be too caught up on cross-domain. That's not necessarily needed for your case. Tried anything like this?
Code: [ Select ]
 
    <script type="text/javascript">
        function setIframeHeight(iframeName) {
          //var iframeWin = window.frames[iframeName];
          var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
          if (iframeEl) {
          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
          var h = alertSize();
          var new_h = (h-148);
          iframeEl.style.height = new_h + "px";
          //alertSize();
          }
        }
 
        function alertSize() {
          var myHeight = 0;
          if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
          } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
          } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
          }
          //window.alert( 'Height = ' + myHeight );
          return myHeight;
        }
    </script>
   
</head>
 
<body onload="setIframeHeight('ifrm');">
 
  1.  
  2.     <script type="text/javascript">
  3.         function setIframeHeight(iframeName) {
  4.           //var iframeWin = window.frames[iframeName];
  5.           var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
  6.           if (iframeEl) {
  7.           iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
  8.           //var docHt = getDocHeight(iframeWin.document);
  9.           // need to add to height to be sure it will all show
  10.           var h = alertSize();
  11.           var new_h = (h-148);
  12.           iframeEl.style.height = new_h + "px";
  13.           //alertSize();
  14.           }
  15.         }
  16.  
  17.         function alertSize() {
  18.           var myHeight = 0;
  19.           if( typeof( window.innerWidth ) == 'number' ) {
  20.             //Non-IE
  21.             myHeight = window.innerHeight;
  22.           } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
  23.             //IE 6+ in 'standards compliant mode'
  24.             myHeight = document.documentElement.clientHeight;
  25.           } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
  26.             //IE 4 compatible
  27.             myHeight = document.body.clientHeight;
  28.           }
  29.           //window.alert( 'Height = ' + myHeight );
  30.           return myHeight;
  31.         }
  32.     </script>
  33.    
  34. </head>
  35.  
  36. <body onload="setIframeHeight('ifrm');">
  37.  


Or like this?

Code: [ Select ]
 
<html>
<script type="text/javascript">
function autoIframe(frameId){
try{
frame = document.getElementById(frameId);
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
objToResize = (frame.style) ? frame.style : frame;
objToResize.height = innerDoc.body.scrollHeight + 10;
}
catch(err){
window.status = err.message;
}
}
</script>
 
 
<body>
 
<iframe id="tree" name="tree" src="tree.htm" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
 
</body>
 
</html>
 
  1.  
  2. <html>
  3. <script type="text/javascript">
  4. function autoIframe(frameId){
  5. try{
  6. frame = document.getElementById(frameId);
  7. innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
  8. objToResize = (frame.style) ? frame.style : frame;
  9. objToResize.height = innerDoc.body.scrollHeight + 10;
  10. }
  11. catch(err){
  12. window.status = err.message;
  13. }
  14. }
  15. </script>
  16.  
  17.  
  18. <body>
  19.  
  20. <iframe id="tree" name="tree" src="tree.htm" onload="if (window.parent && window.parent.autoIframe) {window.parent.autoIframe('tree');}"></iframe>
  21.  
  22. </body>
  23.  
  24. </html>
  25.  
I'd love to change the world, but they won't give me the source code.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 21st, 2009, 8:35 am

The cookie solution above did not work in IE6 or IE7.

UPSGuy, I'm going to try both options you have presented, but I have my doubts about being able to read the height of the page on another domain with javascript. I hope you prove me wrong.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 21st, 2009, 9:14 am

UPSGuy...VERY close...

1) The second option you proposed, I didn't get to work

2) Ah, but the first...is kinda working

First of all, it works in FF, IE6 & IE7 which is better than anything else I've tried.

BUT, it's reading the same height for all 3 of my pages that i'm accessing via my iFrame. pageB, pageB2, pageB3 per my original example.

Here's my test page: http://qa.chiefsupply.com/visual_badge.asp

The only change to your code that I've made was putting the call to the javascript function in the iFrame onload instead of the body onload so that the function gets called every time the page changes in the iFrame.

Any ideas why it's alerting the same height for all 3 pages? pageB should be twice as long as pageB2 & pageB3.

Thanks in advance!
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 21st, 2009, 2:12 pm

...wait that's just finding the height of my screen not the height of the page being loaded...that's why the height is the same on all 3 pages...

so...how do I find the size of the page being loaded in the iframe if it's on another domain??
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 21st, 2009, 2:30 pm

this works like a champ if the pageB is on my domain

Code: [ Select ]
iframeEl.contentWindow.document.body.scrollHeight


as soon as pageB is on a different domain I get JS permission denied errors.

Any other dieas?
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post August 22nd, 2009, 4:59 am

Nah, I haven't tried much outside of that, sorry. I've ran into cross-domain issues before and they essentially suck. Div accepts the src attribute the same way the iframe does, have you tried that approach? Perhaps you can overflow:auto and let it determine the height?
I'd love to change the world, but they won't give me the source code.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 24th, 2009, 5:15 am

Thanks UPSGuy for your suggestions!

div src attribute doesn't work in IE7 or FF3.5

Anybody got any ideas here? I'm near about out of ideas, and time is getting very short. I could def use your thoughts.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 24th, 2009, 8:08 am

I just tried the following combination

Dynamic Drive’s AJAX script to AJAX the entire page:
http://www.dynamicdrive.com/dynamicinde ... ontent.htm

Mixendo’s script to permit the AJAX across domains:
http://dev.mixendo.com/wiki/Mixendo_XHR_Demos

Worked awesome in FF3.5. Wasn't supported in IE7.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 25th, 2009, 10:49 am

Here's the latest...

I'm successfully using flXHR found here http://flxhr.flensed.com/

To AJAX across domains. Works in FF3.5, IE7 and IE6

I can successfully load pageB into a div on pageA.

I'm still working on the particulars of loading pageB2 into a div on pageA. That's the final piece of this puzzle. Once I solve that, I'll post my code.

If anyone is familiar with flXHR and has suggestions on how to accomplish this, I'd appreciate your input.
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • s15199d
  • Expert
  • Expert
  • User avatar
  • Joined: Feb 20, 2004
  • Posts: 524
  • Loc: NC, USA
  • Status: Offline

Post August 26th, 2009, 5:25 am

Wow, what a journey...

I have a working prototype here http://qa.chiefsupply.com/visual_badge.asp

A brief explanation:

I use flXHR to permit AJAX across domains, and load content from a 3rd party page into a containing div on my page.

I use jQuery to hijack the links from the 3rd party page and make them load in my containing div.

For the full walk through I'll point you to the flXHR forum where the site admin shadedecho kindly spoon fed me flXHR and jQuery
http://flxhr.flensed.com/discuss/viewto ... f=14&t=103
Image
Give a man a fish he eats for a day. Teach a man to fish he eats for a lifetime.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post August 26th, 2009, 7:38 am

wow, I think I would have given in and rethought my design, but kudos to you for sticking it out. Hope the proto delivers what you need. Sorry I couldn't be of more assistance.
I'd love to change the world, but they won't give me the source code.
  • pierslawson
  • Born
  • Born
  • No Avatar
  • Joined: Sep 16, 2009
  • Posts: 1
  • Status: Offline

Post September 16th, 2009, 2:13 pm

Hi s15199d,

You mention my example of cross domain iFrames at ShoulderOfGiants and how it doesn't work. It was working for IE8 and FF. I have now fixed it to work with FF, IE8, IE7 and IE6... I should have checked them all out better!

I hope the new version helps.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post September 16th, 2009, 2:13 pm

Page 1 of 1

Post Information

  • Total Posts in this topic: 15 posts
  • Users browsing this forum: No registered users and 203 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.