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

Posted 2023-04-13

【中文标题】正确调整包含未知尺寸图像的 iframe

【英文标题】：properly sizing an iframe that holds images of unknown dimensions

【发布时间】：2010-10-22 04:33:44

【问题描述】：

我有一个 C# 网络浏览器，其中包含一个包含多个 iframe 的 html 页面。每个 iframe 都包含一个任意的 html 文件，通常带有图像。 img 标签通常没有任何宽度或高度属性（即，通常只是<img src="someimage.jpg">）。

我已了解如何根据 iframe 的内容调整 iframe 的大小，并已使用 jquery 使其工作。以下 jquery sn-p 存在于 iframe 的 html 中：

$(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 文件（网页浏览器显示的那个）中定义：

 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 仅在图像下载完成后发生。

有没有人知道如何简单地通过“<img src="someimage.jpg">”检测我的 html 中引用的图像的大小，而无需等待整个下载完成？我试图通过正确调整所有内容的大小来提供最佳用户体验，以便用户可以阅读 iframe 的其余部分，即使下载大图像需要一段时间。

谢谢！ 牛仔裤

【参考方案1】：

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