Question

I am trying to dynamically adjust the height of an iFrame on a web page depending on the content within the iFrame via some JavaScript.
My problem is when I have the script directly on the page in a <script> tag it works fine. When I stuff the code in to a separate js file and link to it- it doesn’t work!

<iframe id='StatusModule' onload='FrameManager.registerFrame(this)' src='http://randomdomain.dk/StatusModule.aspx'></iframe>

<script type='text/javascript' src='http://randomdomain.dk/FrameManager.js'></script>

It gives me the error:

Uncaught ReferenceError: FrameManager is not defined

Can this really be true? Has it something to do with the page life cycle?

Ps. I guess the JavaScript code is irrelevant, as we not it works.

UPDATE: I think this might have something to do with secure http (https) and the different browsers in some weird way. I noticed that the script actually worked in Firefox. Or rather I’m not sure if its the script, or just Firefox’s functionality that resizes iframes automatically depending on the content. It doesn’t give me any error though.

If I then add https to the script url reference, the scripts work in IE and Chrome – but not in Firefox. Function reference error! This just got weird!

UPDATE #2: Its not a Firefox function that resizes the iframe. Its the actual script that works (without https).

UPDATE #3: The JavaScript. Works fine if I put it directly into a script tag.

var FrameManager = {
        currentFrameId: '',
        currentFrameHeight: 0,
        lastFrameId: '',
        lastFrameHeight: 0,
        resizeTimerId: null,
        init: function () {
            if (FrameManager.resizeTimerId == null) {
                FrameManager.resizeTimerId = window.setInterval(FrameManager.resizeFrames, 0);
            }
        },
        resizeFrames: function () {
            FrameManager.retrieveFrameIdAndHeight();
            if ((FrameManager.currentFrameId != FrameManager.lastFrameId) || (FrameManager.currentFrameHeight != FrameManager.lastFrameHeight)) {
                var iframe = document.getElementById(FrameManager.currentFrameId.toString());
                if (iframe == null) return;
                iframe.style.height = FrameManager.currentFrameHeight.toString() + "px";
                FrameManager.lastFrameId = FrameManager.currentFrameId;
                FrameManager.lastFrameHeight = FrameManager.currentFrameHeight;
                window.location.hash = '';
            }
        },
        retrieveFrameIdAndHeight: function () {
            if (window.location.hash.length == 0) return;
            var hashValue = window.location.hash.substring(1);
            if ((hashValue == null) || (hashValue.length == 0)) return;
            var pairs = hashValue.split('&');
            if ((pairs != null) && (pairs.length > 0)) {
                for (var i = 0; i < pairs.length; i++) {
                    var pair = pairs[i].split('=');
                    if ((pair != null) && (pair.length > 0)) {
                       if (pair[0] == 'frameId') {
                            if ((pair[1] != null) && (pair[1].length > 0)) {
                               FrameManager.currentFrameId = pair[1];
                            }
                        } else if (pair[0] == 'height') {
                            var height = parseInt(pair[1]);
                            if (!isNaN(height)) {
                                FrameManager.currentFrameHeight = height;
                                //FrameManager.currentFrameHeight += 5;
                            }
                        }
                    }
                }
            }
        },
        registerFrame: function (frame) {
            var currentLocation = location.href;
            var hashIndex = currentLocation.indexOf('#');
            if (hashIndex > -1) {
                currentLocation = currentLocation.substring(0, hashIndex);
            }
            frame.contentWindow.location = frame.src + '&frameId=' + frame.id + '#' + currentLocation;
        }
    };
    window.setTimeout(FrameManager.init, 0);

UPDATE #4: Alright I did as ShadowWizard and TheZuck suggested:

   <script type="text/javascript">
        var iframe = document.createElement("iframe");
        iframe.src = "http://www.randomdomain.dk/StatusWebModule.aspx";
        iframe.width = '100%';
        iframe.id = 'StatusModule';
        iframe.scrolling = 'no';
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                FrameManager.registerFrame(iframe);
            });
        } else {
                iframe.onload = function () {
                    FrameManager.registerFrame(iframe);
                };
            }
  document.getElementById('framecontainer').appendChild(iframe);                                     
        </script>

With HTTP as URL its work on IE and Firefox – not Chrome. If I set it to HTTPS it works on Chrome and IE – Not Firefox. Same error:

"ReferenceError: FrameManager is not defined".

What is going on here?

Answer 1

a couple of things:

1. I would bet on a race condition when you have two independent
   resources which are supposed to be loaded concurrently. You can
   easily check this by writing to log (or to document, whichever works
   for you) when both finish loading (i.e. add a little script in the
   iframe to dynamically add the time to the content or write to log if
   you’re using chrome, do that in the external script file as well,
   and see if they post the time in a specific order when this fails). In your case, if the script appears before the iframe, and you don’t mark it as async, it should be loaded before the iframe is fetched, so it would seem strange for the iframe not to find it due to a race condition. I would bet on (3) in that case.
2. Assuming there is such an issue (and if there isn’t now, when you go
   out into the real world it will be), a better way to do this is to
   make sure both behave well in case the other loads first. In your
   case, I would tell the iframe to add itself to a local variable
   independent of the script, and would tell the script to check if the
   iframe registered when it loads, and after that in recurring
   intervals until it finds the iframe.
3. If the page the script is loaded into is not in the same domain
   as the iframe (note that it doesn’t matter where the script comes
   from, it only matters what the page’s domain is), (or even the same
   protocol as someone mentioned here), you will not be able to access
   the content so you won’t be able to resize according to what the
   content is. I’m not sure about the onload method, if it’s considered part of the wrapping page or part of the internal iframe.
4. Check out this question, it sounds relevant to your case:
5. There’s also an interesting article here about this.