Question

我正在尝试通过一些javascript动态调整网页上iFrame的高度，具体取决于iFrame中的内容。我的问题是，当我在<script>标签的页面上直接使用脚本时，它可以正常工作。当我将代码填入单独的js文件并链接到它时 - 它不起作用！

<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>

它给了我错误： 未捕获的ReferenceError：未定义FrameManager

这真的可以吗？它与页面生命周期有关吗？

聚苯乙烯。我想javascript代码是无关紧要的，因为我们不能正常工作。

更新：我认为这可能与安全的http（https）以及不同的浏览器有些奇怪。我注意到该脚本实际上在firefox中工作。或者更确切地说，我不确定它的脚本，还是Firefox的功能，根据内容自动调整iframe的大小。但它并没有给我任何错误。如果我然后将https添加到脚本url引用，脚本在IE和chrome中工作 - 但不在Firefox中。功能参考错误！跆拳道。这很奇怪！

UPDATE＃2：它不是调整iframe大小的FF函数。它的实际脚本有效（没有https）。

更新＃3： javascript。如果我将其直接放入脚本标记中，则可以正常工作。

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);

更新＃4：好吧，我做了ShadowWizard和TheZuck建议：

   <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>

使用HTTP作为url它在IE和FF上的工作 - 不是chrome。如果我将它设置为HTTPS，它适用于chrome和IE - Not FF。相同的错误“ReferenceError：未定义FrameManager”。到底发生了什么事？

Answer 1

我认为你的框架是在脚本之前加载的，所以当iframe完成加载时，“FrameManager”还不存在。

Answer 2

一些事情：

当你有两个独立的时候，我会赌一个竞争条件应该同时加载的资源。您可以通过写入日志（或文档，无论哪个有效）轻松检查这一点当你们两个完成加载时（即在...中添加一个小脚本） iframe动态地向内容添加时间或写入日志if 你正在使用chrome，也可以在外部脚本文件中执行此操作，并且看看当它失败时他们是否以特定顺序发布时间）。在您的情况下，如果脚本出现在iframe之前，并且您没有将其标记为异步，则在获取iframe之前应该加载，因此iframe找不到它会很奇怪它是由于竞争条件。在那种情况下，我打赌（3）。
假设存在这样的问题（如果现在没有，那么当你去的时候进入现实世界它将是一个更好的方法来做到这一点确保两者在第一次加载时表现良好。在你的我会告诉iframe将自己添加到局部变量独立于脚本，并会告诉脚本检查是否 iframe在加载时注册，之后重复出现间隔，直到找到iframe。
如果脚本加载到的页面不在同一个域中作为iframe（请注意，脚本来自何处并不重要从，它只关乎页面的域名是什么），（甚至相同协议就像这里提到的那样），你将无法访问内容，所以你将无法根据什么来调整大小内容是。我不确定onload方法，如果它被认为是包装页面的一部分或内部iframe的一部分。
查看this question，这听起来与您的案例相关：
还有一篇有趣的文章here。

Javascript引用不起作用

2 个答案: