夜市小霸王

最近有一個案子是要在網頁中嵌入一個別人的地圖，我固定好iframe高度之後，轉給使用者看，對方用電腦看OK，但是用手機看就發現地圖被切到只剩下一點，如果改用手機版面，那地圖就太大

所以嵌入iframe是滿方便的，但如果固定iframe大小，就可能會讓iframe顯示內容被切掉或太多空白

那要如何能自動調整iframe大小呢？

嵌入的iframe

<iframe id="ifrm" scrolling='no' src='maps.aspx' frameborder="0" style="border: 0px; width: 100%; height: 500px;" allowfullscreen ></iframe>

JS語法

  <script type="text/javascript">
        var iframe = document.getElementById("ifrm");

        // Adjusting the iframe height onload event
        iframe.onload = function () {
            iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
        }
    </script>