正确调整包含未知尺寸图像的 iframe 的大小

Question

我有一个 C# 网络浏览器，它包含一个包含多个 iframe 的 html 页面。 每个 iframe 都包含一个任意 html 文件，通常包含图像。 img 标签通常没有任何宽度或高度属性（即，通常只是 ）。

我已经阅读了如何根据 iframe 的内容调整其大小，并使用 jquery 让它工作。 iframe 的 html 中存在以下 jquery 片段：

$(document).ready(function() {
  $('img').each(function(){ 
        $(this) 
            .bind('load readystatechange', function(e) {
                var iframes = window.top.document.getElementsByName(window.name);
                if (iframes.length == 1) {
                    window.top.DoResizeFrame(iframes[0]);
                }
            })
    }); 

DoResizeFrame 在父 html 文件（Web 浏览器显示的文件）中定义：

 function DoResizeFrame(fr) {
        if (fr && fr.Document && fr.Document.body) {
            fr.style.height = fr.Document.body.scrollHeight + 'px'; 
            fr.style.width = fr.Document.body.scrollWidth + 'px';
        }
    }

我还从父文档的 $(document).ready 事件中调用 DoResizeFrame。 这非常有效 - 如果没有图像，文档的就绪事件会触发调整大小。 如果有图像，则每次图像加载完成时，iframe 都会正确调整大小。

但是，加载大图像会导致 iframe 大小不正确，直到图像完全加载为止。 由于我很少在图像标签中使用宽度和高度属性，因此我想我可以使用jquery来监听图像的readystatechange事件，并在“加载”时获取图像的大小并适当调整大小即使图像仍在加载，iframe 也会显示。 不幸的是，至少在 IE7 中，readystatechange=loading 仅在图像下载完成后发生。

有谁知道如何通过“”检测 html 中引用的图像的大小，而无需等待整个下载发生？ 我试图通过正确调整所有内容的大小来提供最佳的用户体验，以便用户可以阅读 iframe 的其余部分，即使下载大图像需要一段时间。

谢谢！ 吉恩

Answer 1

一种可靠的确定方法是在下载图像之前询问服务器图像的大小。 我已经使用 .net 完成了此操作，这非常简单。