Как автоматически изменить размер содержимого 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, япросто изменили ширину и высоту iframe с помощью кода jquery следующим образом:

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

Однако, он изменяет только ширину iframe, и его содержимое не может быть изменено.Как я могу изменить размер содержимого при изменении размера окна?Большое спасибо!

Answer 1

Вам просто нужно установить свойство 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 2

Ваш сайт не может вносить изменения в содержание iframe.Если вы управляете сайтом внутри iframe, вы можете настроить систему сообщений между двумя сайтами.Возможно, стоит проверить, существует ли один, даже если вы не контролируете другой сайт.

В противном случае, я бы порекомендовал просто обновить содержимое iframe:

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

.в комментарии вы должны указать эту строку, чтобы она не запускалась сразу после изменения размера, так как это привело бы к необоснованному количеству запросов на удаленный сайт.

Answer 3

Вы можете установить width: 100% с помощью CSS.проверьте это: http://jsfiddle.net/w8xeotv4/

Answer 4

Если вы не столкнулись с проблемами CORS и целевой сайт отзывчив, вы можете попробовать что-то вроде этого

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

Редактировать

Извините, это был очень плохой ответ, не уверен, о чем я думал, когда писал это.Принятый ответ - лучший способ сделать это.