动态 IFrame 调整大小在 IE 中不起作用？答案

【问题标题】：Dynamic IFrame resize not working in IE?动态 IFrame 调整大小在 IE 中不起作用？
【发布时间】：2013-02-07 07:00:06
【问题描述】：

我有一些代码可以动态调整 iframe 的大小：

function autoResizeFrames() {
    frames = document.getElementsByTagName("iFrame");
    window.setInterval("autoresize_frames()", 400);
}

function autoresize_frames() {

    for (var i = 0; i < frames.length; ++i) {
        if (frames[i].contentWindow.document.body) {
            var frames_size = frames[i].contentWindow.document.body.offsetHeight;
            if (document.all && !window.opera) {
                frames_size = frames[i].contentWindow.document.body.scrollHeight;
            }
            frames[i].style.height = frames_size + 'px';
        }
    }
}

这个功能在 Firefox 和 Chrome 中效果很好，但在 IE 10 和 9 中它有 mo 效果。

这是我有一个 IFrame 的地方

<div id="projectModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel"
            aria-hidden="true">
            <div class="modal-header">
                   <button type="button" runat="server" onserverclick="btnClose_Click"  class="close" aria-hidden="true">
                    ×</button>
                <h3 id="projectModalLabel">Edit Project</h3>
            </div>
            <div class="modal-body">
                <iframe src="" style="width: 100%; height: 200px; border: none;" frameborder="0" id="projectFrame" name="projectFrame" scrolling="no" allowtransparency="true"></iframe>
            </div>
            <div class="modal-footer">
                      <button type="button" runat="server" onserverclick="btnClose_Click"  class="btn" aria-hidden="true">
                    Close</button>
            </div>
        </div>

为什么除了 IE 之外它在任何地方都可以使用？我认为 javascript 无处不在？

谢谢

上面写着：

SCRIPT5007: Unable to get property 'document' of undefined or null reference 
kezcommon.js, line 62 character 5

if (frames.contentWindow.document.body) {

【问题讨论】：

也许是 IE 的某种 XSS 预防措施？
你能为此提供一个jsfiddle吗？另外：您是否注意过 JavaScript 错误？
我从 IE 的日志中发布了错误...

标签： c# javascript asp.net iframe

【解决方案1】：

window.frames 是一个原生 DOM 集合，您正在分配一个具有相同名称的节点列表。不知何故IE把这两个frames搞混了，不相似。

autoresize_frames() 似乎使用window.frames 集合而不是frames 节点列表（在autoResizeFrames() 中定义）。但是，当通过此集合访问iframe 时，IE 中没有可用的contentWindow 或contentDocument，因为window.frames 在iframes 中包含实际的window 对象。

您需要直接访问frames[i].document 或frames[i]，即iframe 中的window。

快速解决方法是使用其他名称而不是 frames 作为节点列表。

【讨论】：

Case 也可能参与其中。 OP 正在获得“iFrame”的标记名......你认为 IE 可能会因为标记实际上是 <iframe ... 而表现得小气吗？无论如何，我什至没有注意到这部分，这些都是非常好的点。我认为 OP 应该使用他分配的 ID 来获取对 iframe 的引用，或者最坏的情况是使用类名，并在 autoResizeFrames() 方法之外存储对 iframe 的引用。
确实，IE 仍然对 HTML 标签区分大小写...我必须承认，我没有注意到 :)。
作为旁注，Chrome、FF 和 Opera 似乎也将 object Windows 存储到 window.frames 集合中。在 IE(10) 中修复案例也没有帮助，原生 DOM 集合仍然会影响用户定义。
您认为 OP 是否有可能挂钩 iframe 文档的 onload 事件？我想知道这里的问题是否是竞争条件之一......试图在文档对象准备好之前访问 DOM 的 scrollHeight。
我对此表示怀疑，因为 OP 说它可以在其他浏览器中运行（除非 IE 慢得多？）。错误信息是“Unable to get property 'document' of undefined..”，意思是contentWindow是未定义的...

【解决方案2】：

试试

window.setInterval(autoresize_frames, 400);

只是看看设置回调的替代方法是否有效。您可能还需要将 autoresize_frames() 函数放在 autoResizeFrames() 函数之上，以确保它在 setInterval() 调用之前存在于内存中。

【讨论】：

尝试了你所有的建议；还是没有运气。