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

您只需要将最大宽度属性设置为 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

您可以使用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);
});

编辑

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

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

4 个答案: