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

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

这是我的代码：

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

---

但是，它仅更改iframe的宽度，并且无法调整内容的大小。当窗口调整大小时，如何调整内容的大小？多谢各位

假设您没有遇到CORS问题，并且目标站点响应良好，您可以尝试以下方法

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

编辑

---

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

您的网站被限制对iframe的内容进行更改。如果在iframe中控制站点，则可以在两个站点之间设置消息系统。即使您不控制另一个站点，也可能需要检查其中一个站点是否存在

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

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

---

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

你可以使用CSS设置

宽度：100%

。

---

选中此项：

您只需将最大宽度属性设置为100%

---

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

iframe部件的大小调整不需要JS，您只需通过CSS指定100%的宽度即可。但是如果贴图没有自动调整，那么在调整大小后可能需要重新加载整个对象。（但这应该被适当地限制，否则您将触发大量请求。）

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

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