調整瀏覽器窗口大小時如何自動調整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的大小，我只是使用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

您只需要將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 3

您可以設置width: 100%使用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);
});

編輯

抱歉，這是一個非常糟糕的答案，不確定我寫這篇文章時在想什么。 公認的答案是最好的解決方法。