[dexplorer]

Good Day All...

I am trying to have an iframe on a page that will auto resize to fit the content on another domain that I have. I can't seem to find a way to do it, I've even tried to set the hight at 100%. Is there a way that I can have it done?

this is the link where the page is located

Thanks in advance

[xxvatarxx]

yes with javascript, i have the script saved somewhere, i'll try to find it for you... unless someone else posts it first

[dexplorer]

I'll be sooooooo happy if you or anyone else can hook me up on that script... I really need it...

[kufudo]

I just did this 5 minutes ago (found the code on some other forum). Try this out (IE only though, the sniffer code wasn't working so I got rid of it). Put all of this in the parent page:

Code:

<script language="JavaScript">
<!--
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>

<IFRAME SRC="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

[Mister Bobo]

Works on every browser XP en Mac

Set this in the header:

Code:

<script language="JavaScript">
<!--
function calcHeight()
{
  //find the height of the internal page
  var the_height=
    document.getElementById('the_iframe').contentWindow.
      document.body.scrollHeight;

  //change the height of the iframe
  document.getElementById('the_iframe').height=
      the_height;
}
//-->

and edit this :

<iframe name="the_iframe" onLoad="calcHeight();" scrolling="no" width="730"  id="the_iframe" src="you_page.html" frameborder="0" allowtransparency="true"></iframe>

greetings, Mister Bobo

[Ed Wood]

I am in the same boat as the OP where I need to resize an IFrame containing an EXTERNAL src URL. The scripts referenced so far will work for anything on the same domain. Any src.page from an external or different domain as the page containing the IFrame will generate an "Access Denied Error (13)"

IE has made some functions and properties inaccessible due to cross-scripting hacks but rudimentary things like src etc are available.

[kuraiza]

poop, I've got the same problem, and I tried several different resizing scripts, they all came up with the same 'access denied' error.

Is there a solution? Or this a lost cause?

[rfanders]

The javascript solution is NOT possible since you will get a "access denied" if you try to access the DOMs document object and it is hosted on a different domain (or port too actually).

I had the same problem but refused to give up and actually came up with a workable solution. There are three requirements though:
1. the iframed page must be under the same domain.
2. You must be able to add some code on the iframed pages.
3. You must add some code to the "iframe-holder" page.

It works by setting a cookie for each pageload which the "iframe-holder" reads. It is a modification of the script found at Dynamic Drive, http://www.dynamicdrive.com/forums/a...hp/t-3879.html.
In order to reload the cookie I have added another, hidden, iframe to reoload the cookie (can be done in various other ways but this was just an easy way)...

This is only tested in Firefox but should be working in Internet Explorer too.

Put this on each iframed page (Replace THE_DOMAIN with the main domain, ie: 'programmingtalk.com'):

Code:

<script type="text/javascript">
function SetCookie (name, value, domain) {
  var expires = null;
  var path = '/';
  var secure = false; //(argc > 3) ? argv[3] : false;
  document.cookie = name + "=" + escape (value) +
  ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
  ((path == null) ? "" : ("; path=" + path)) +
  ((domain == null) ? "" : ("; domain=" + domain)) +
  ((secure == true) ? "; secure" : "");
}
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0;

   if (document.body.offsetHeight) //ns6 syntax
    SetCookie('frameheight', document.body.offsetHeight + FFextraHeight, 'resfeber.se');
   else if (document.body.offsetHeight) //ie5+ syntax
    SetCookie('frameheight', document.body.scrollHeight, 'THE_DOMAIN');

</script>

Put this on the "iframe-holder" page and change EXTERNAL_INIT_PAGE to the external URL and STATIC_HTML_OR_SO to some page which can be accessed fast so you can retrieve the cookie.

Code:

<script type="text/javascript">

var iframeids=["the_view_frame"];

var min_size = 300;  // minimum height

function getIFrame(name)
{
  if (document.getElementById || document.all)
    return document.getElementById ? document.getElementById(name) : document.all[name];

  return null;
}

function resizeCaller()
{
 var dyniframe=new Array();
 for (i=0; i < iframeids.length; i++)
 {
   var obj = getIFrame(iframeids[i]);

   if(obj)
    resizeIframe(obj);
 }
}

function get_size(name)
{
  var arg = name + "=";
  var alen = arg.length;
  var the_cookie_frame =  getIFrame('the_cookie_frame');
  var the_cookie_frame = the_cookie_frame.contentDocument ? the_cookie_frame.contentDocument : the_cookie_frame.Document;
  var the_cookie = the_cookie_frame.cookie;
  the_cookie_frame.location.reload();
  var clen = the_cookie.length;
  var i = 0;
  while (i < clen)
  {
    var j = i + alen;
    if (the_cookie.substring(i, j) == arg)
    {
      var endstr = the_cookie.indexOf (";", j);
      if (endstr == -1)
       endstr = the_cookie.length;
      return unescape(the_cookie.substring(j, endstr));
    }
    i = the_cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return 0;
}

function readjustIframe(loadevt)
{
 var crossevt=(window.event)? event : loadevt;
 var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement;
 if (iframeroot)
  resizeIframe(iframeroot);
}

function resizeIframe(frameobj)
{
 try
 {
  if (!window.opera)
  {
   if (frameobj.addEventListener)
    frameobj.addEventListener("load", readjustIframe, false);
   else if (frameobj.attachEvent)
   {
    frameobj.detachEvent("onload", readjustIframe); // Bug fix line
    frameobj.attachEvent("onload", readjustIframe);
   }
  }
 }
 catch(e) {};

 frameobj.height = get_size('frameheight') > min_size ? get_size('frameheight') : frameobj.height;
 frameobj.style.display="block";
}

if (window.addEventListener)
 window.addEventListener("load", resizeCaller, false);
else if (window.attachEvent)
 window.attachEvent("onload", resizeCaller);
else
 window.onload=resizeCaller;

</script>
</html>
<body marginwidth="0" marginheight="0">
<iframe id="the_view_frame" src="EXTERNAL_INIT_PAGE" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%;"></iframe>
<iframe id="the_cookie_frame" src="STATIC_HTML_OR_SO" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" vspace="0" hspace="0" style="display:none"></iframe>
</body>

[motin]

@rfanders:

That is a wonderful hack you've developed! I was considering:
a. total restructuring of the site
b. the use of JAHAH (http://tools.blogmatrix.com/jahah/) - very neat, but lots of work to convert iframe pages to embedded ones
c. similar solution to yours but using a php-script to transfer the number (total cross domain coverage btw)

But all of these had major drawbacks in lack of both implementation-ease (would have taken days). I believe c. also would be too slow, especially for modem users.

Your solution comes really is the most optimal here! All I had to do was to get the sites under the same domain, use your code and bang, it works to 100% in firefox.

I have tested it in IE 6 though, and it is not working 100%. The transport of the number to the holder works great, so does the resize, but the transferred number is in my case 416, when it should be (as is in Firefox) 549. This makes the scrollbars stay visible, along with a portion (143 pixels high...) of the iframe's site not being unconvered by the resize.

I'll dig into it and see if I can correct this. So long for now.

Btw, You've got some typos, like leaving the real domain-name, and having an extra "if(" almost in the very bottom, for your knowledge.

Cheers!

[motin]

Works now.

I merged code from: http://home.comcast.net/~jscheuer1/s...si_III_sub.htm and your code (to right under SetCookie-function):

Code:

    
 // ============================================
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function collectWidth(){
    var wVal=0
    var objs=document.getElementsByTagName('*')
    for (var i_tem = 0; i_tem < objs.length; i_tem++){
    wVal=Math.max(objs[i_tem].offsetWidth, wVal)
    }
    return wVal;
    }
    var resizeHeight=document.all? iecompattest().scrollHeight : iecompattest().offsetHeight;
    var resizeWidth=window.opera? collectWidth() : iecompattest().scrollWidth;
    //Can't to this here without hard coding maxWidth:
    //resizeHeight+=parent.document.getElementsByName(window.name)[0].offsetWidth<resizeWidth? 18 : 0;
 // ============================================
   /* 
   Above snippet originally taken from: 
   Resize Iframe Script © John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums
   User Name: jscheuer1
   This Credit Must Remain for Legal Use 
   */
 // ============================================

    var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
    var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0;
    resizeHeight += FFextraHeight;

    SetCookie('frameheight', resizeHeight, sharedDomain);

Browser compatibility report (Linux - Ubuntu Dapper Beta):
(I have an alert popping up in the holder script that tells me the transported height)

IE6: Works
IE5.5: Works
IE5: Works
Firefox 1.5.0.2: Works
Mozilla 1.7.12: Works
Konqueror 3.5.2: Does not work (no alert even)
Opera 8.51: Does not work (no alert even)