当浏览器窗口调整大小时，如何自动调整iframe内容大小？
提问于 2018-10-24 22: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的宽度，并且不能调整内容的大小。当窗口调整大小时，如何调整内容的大小？非常感谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-10-24 22:56:34
您的站点被限制对iframe的内容进行更改。如果在iframe中控制站点，则可以在两个站点之间设置消息系统。即使你不控制另一个站点，也可能值得检查其中一个是否存在。
否则，我建议简单地刷新iframe的内容：
$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });正如评论中提到的那样，您应该包含这一行，这样它就不会在调整大小时立即触发，因为这会向远程站点发送不合理的请求数量。
Stack Overflow用户
发布于 2018-10-24 23:35:04
您只需要将最大宽度属性设置为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>这将根据浏览器窗口调整大小。
Stack Overflow用户
发布于 2018-10-24 23:17:34
您可以使用CSS设置width: 100%。检查这个：http://jsfiddle.net/w8xeotv4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52982874
复制相关文章
腾讯云开发者
