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

Question

我现在正在制作一个网站，该网站将在地图（而非Google地图）上显示地点。 我使用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的宽度，并且无法调整内容的大小。 调整窗口大小时如何调整内容大小？ 非常感谢你！

Answer 1

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

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

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

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

Answer 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>

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

Answer 3

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

Answer 4

假设您没有遇到CORS问题，并且目标网站具有响应能力，则可以尝试这样的操作

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

编辑

抱歉，这是一个非常糟糕的答案，不确定我写这篇文章时在想什么。 公认的答案是最好的解决方法。