浏览器窗口调整大小时如何自动调整 iframe 内容大小？答案

【问题标题】：How to automatically resize iframe content size when browser window resize?浏览器窗口调整大小时如何自动调整 iframe 内容大小？
【发布时间】：2018-10-25 06:40:08
【问题描述】：

我现在正在制作一个网站，它将在地图（不是谷歌地图）上显示一个地点。我使用 iframe 来包含地图，我希望地图根据浏览器窗口宽度调整宽度。

这是我的代码：

<iframe width='1800' height='300' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'></iframe>

要调整 iframe 的大小，我只需使用 jquery 代码更改 iframe 的宽度和高度，如下所示：

$(window).resize(function(){
var window_width = $(window).width();
$('iframe').width(window_width);
});

但是，它仅更改 iframe 的宽度，并且无法调整内容的大小。窗口调整大小时如何调整内容大小？非常感谢！

【问题讨论】：

iframe部分的大小调整不需要JS，可以通过CSS简单地指定100%的宽度。但是如果地图没有自动适应，那么你可能需要在调整大小后重新加载整个东西。（但那应该适当地限制，否则你会触发大量的请求。）

标签： javascript jquery html css iframe

【解决方案1】：

您的网站无法更改 iframe 的内容。如果您在 iframe 中控制站点，则可以在两个站点之间设置消息系统。即使您不控制另一个站点，也可能值得检查一个是否存在。

否则，我建议只刷新 iframe 的内容：

$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });

正如评论中提到的错误，您应该包含此行，以便在调整大小时不会立即触发，因为这会向远程站点发送不合理数量的请求。

【讨论】：

【解决方案2】：

您只需将 max-width 属性 设置为 100%。

<iframe width='1800' height='300' style="max-width:100%" frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'> 
</iframe>

这将根据浏览器窗口调整大小。

【讨论】：

【解决方案3】：

您可以使用 CSS 设置 width: 100%。检查这个：http://jsfiddle.net/w8xeotv4/

【讨论】：

【解决方案4】：

假设您没有遇到 CORS 问题并且目标站点是响应式的，您可以尝试这样的操作

$(window).resize(function(){
  var window_width = $(window).width();
  $('iframe').width(window_width);
  $('iframe').contents().width(window_width);
});

编辑

对不起，这是一个非常糟糕的答案，不确定我在写这篇文章时的想法。接受的答案是解决问题的最佳方法。

【讨论】：