调整 iframe 大小以适应其内容

Question

可能重复：
根据内容调整iframe大小

我有一个iframe，其中src是一个HTML文件，并且此iframe放置在用户控件中：

<iframe frameborder="0" src="CName.htm" align="left" width="730" height="1100" ></iframe>

我需要iframe根据内容自动调整大小，使其高度根据HTML文件的高度设置，而不需要使用滚动属性。你有什么想法吗？

- Ahmy

---

请参考以下链接：https://dev59.com/RXVC5IYBdhLWcg3w4Vf6 - Justin Wignall

那个链接的答案已经过时了，可以查看 https://github.com/davidjbradshaw/iframe-resizer 获取一个更简单的解决方案。 - David Bradshaw

Answer 1

我已经使用以下 jQuery 代码来实现这个功能：

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

我认为如果iframe的内容跨域，这种方法可能不起作用。

- Ferruccio

---

要进行跨域操作，您需要使用postMessage API，还需要检查窗口调整事件和DOM变化，以便iFrame保持内容的大小。请查看此库，它可以为您处理所有这些事情。https://github.com/davidjbradshaw/iframe-resizer - David Bradshaw

Answer 2

你可以计算出框架内部内容的高度和宽度，然后调用框架所有者上的函数来设置 iframe 元素的高度和宽度。

- Tom Ritter

---

仅当 iframe 及其父级不违反同源策略时，此方法才有效。 - nickh

Answer 3

有一种方法！它使用jQuery，而且非常简单。有点hacky的感觉。

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

就是这样！

干杯！:)

- Shripad Krishna

---

+20 是什么意思？ - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ