1

first off, I have very very basic knowledge of Javascript and outdated knowledge of HTML, so I've been copying and pasting like a fiend trying to get this to work.

this is the code I'm currently using: (based on https://stackoverflow.com/a/819455/3005885)

<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 id="iframe1" name="iframe1" src="source.html" width="100%" frameborder="0" onLoad="autoResize('iframe1');"></iframe>

I have a CSS/Javascript row of "buttons" which move you to different pages on the site, and on the page in question there is an iframe and a series of links contained in a table (for organizational purposes). When you first click on the "button" for the page in question the iframe is showing up at a minimal height, until you click on the "button" again, and then the resizing behaves normally.

I've been trying to get the script (actually, several different scripts) to control the iframe element, but it seems like the iframe has to "exist" before it'll listen to the script.

I'd like the page to load with the "source.html" page at full height in the iframe, and the iframe's height to be dictated by the other pages pointed at the iframe.

EDIT 1: I've just tried this approach: https://stackoverflow.com/a/526373/3005885 with the same results as before. Am I doing something else wrong? Something basic? The JS works perfectly, but only after clicking on the link to load the page the iframe is in a second time, clicking refresh/reload (or command-R) doesn't make a difference.

EDIT 2: Here's another method that behaves the same as the others I've mentioned, only this one disables the scrollbars even in the initial too-small-to-see-anything loading (https://www.ibm.com/developerworks/community/blogs/peteryim/entry/determining_the_iframe_height_based_on_its_content6?lang=en).

Community
  • 1
  • 1
user3005885
  • 11
  • 3
  • I'd do [something like this](http://stackoverflow.com/a/11807287/1169519) within `iframe`. – Teemu Nov 18 '13 at 19:06
  • That doesn't seem to be working for me. It occurs to me that there's a very real possibility that I've missed something very basic (ie: how to call out the Javascript, DOCTYPE, etc). Thanks for the suggestion though, it seems like a good one – user3005885 Nov 18 '13 at 21:17
  • It's kinda pseudocode in my answer. You need to calculate `iframeContentWidth/Height` after `window.onload` has fired in the `iframe`. Works for sure in all browsers, if there won't be any [cross-domain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) issues. – Teemu Nov 19 '13 at 05:05

1 Answers1

0

It turns out that the issue was a problem with a redirect set up to point visitors from our main URL to the directory where the site actually exists (an organizational nightmare, but necessary at this time). The error read as follows:

Uncaught SecurityError: Blocked a frame with origin "http://www.mysite.org" from accessing a frame with origin "http://www.mysite.com". Protocols, domains, and ports must match.

Somehow a .com snuck into the redirect on our .org site. For reasons unknown to me (something on the server side) the site behaves properly with .com instead of .org, but it really messes with javascript. So, the culprit was typing too fast, and a "futzed keystroke" as it is called.

Egg on my face, egg on my face.

user3005885
  • 11
  • 3
  • I'm still getting `Uncaught TypeError: Object [object global] has no method 'resizeIframe'` (which appears to be a ` ` issue, but the thing is working ok for now. – user3005885 Nov 21 '13 at 16:31