Как автоматически изменять размер содержимого iframe при изменении размера окна браузера?
Сейчас я создаю веб-сайт, на котором будет отображаться точка на карте (а не карта Google). Я использовал iframe для хранения карты и хотел бы, чтобы ширина карты изменялась в соответствии с шириной окна браузера.
Это мой код:
<iframe width='1800' height='300' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://f.amap.com/xxxxxxxxxx'></iframe>
Чтобы изменить размер iframe, я просто изменил ширину и высоту iframe, используя такой код jquery:
$(window).resize(function(){
var window_width = $(window).width();
$('iframe').width(window_width);
});
Однако он изменяет только ширину iframe, а размер содержимого изменить нельзя. Как изменить размер содержимого при изменении размера окна? Большое спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Предполагая, что вы не сталкиваетесь с проблемами 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; });
Как упоминалось в комментарии, вы должны содержать эту строку, чтобы она не запускалась сразу после изменения размера, поскольку это отправит необоснованное количество запросов на удаленный сайт.
Вы можете установить width: 100% с помощью CSS.
проверьте это: http://jsfiddle.net/w8xeotv4/
Вам просто нужно установить свойство 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>
это будет изменить размер в соответствии с окном браузера.
Для изменения размера части iframe не нужен JS, вы можете просто указать ширину 100% с помощью CSS. Но если карта не адаптируется автоматически, возможно, вам придется перезагрузить все это после изменения размера. (Но тогда это должно быть правильно задушен, иначе вы будете запускать огромное количество запросов.)