iframe自適應

一、iframe自適應頁面

當我們在一個網頁中嵌入另一個網頁時，我們可以使用iframe標籤。一般來說，iframe會顯示一個特定的固定大小的區域。但是，如果我們希望iframe自適應頁面大小，我們可以使用下面的代碼：

<iframe src="https://example.com" frameborder="0" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%;"></iframe>

這段代碼中，我們使用了CSS屬性position和top、left、bottom、right等來設置iframe的位置和大小，使其填滿整個頁面。這樣，當瀏覽器窗口大小改變時，iframe也會自適應。

二、iframe自適應手機電腦

我們常常需要在不同的設備上展示網頁，如桌面電腦、筆記本電腦、智能手機等。為了讓iframe在不同設備上自適應，我們可以使用媒體查詢。

首先，在head標籤中添加標籤：

<meta name="viewport" content="width=device-width, initial-scale=1">

這個meta標籤指定了視口的大小為設備的寬度，並且將初始縮放比例設置為1。

然後，在CSS文件中添加媒體查詢：

@media (max-width: 768px) {
  iframe {
    width: 100%;
    height: 300px;
  }
}
@media (min-width: 769px) {
  iframe {
    width: 600px;
    height: 500px;
  }
}

這段代碼通過媒體查詢分別為不同設備設置不同的iframe大小。其中，max-width: 768px是指當屏幕寬度小於等於768像素時，設置iframe寬度為100%，高度為300像素；而min-width: 769px是指當屏幕寬度大於等於769像素時，設置iframe寬度為600像素，高度為500像素。開發者可以根據不同設備的情況靈活調整。

三、iframe自適應高度

有時候iframe的高度可能不確定，例如嵌入的頁面中有可變高度的元素。要使iframe高度自適應，我們可以使用js來獲取iframe內容的高度，然後設置iframe的高度為內容的高度。

首先，在iframe的src文檔中添加以下代碼：

<script>
    function resizeIframe() {
        var iframe = document.getElementById('myIframe');
        if(iframe) {
            iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
        }
    }
</script>

這段代碼會獲取iframe的ID為myIframe，並通過iframe.contentWindow.document獲取iframe的內容文檔，然後獲取文檔的body元素的scrollHeight屬性，設置iframe的高度為文檔的高度。

然後，在iframe中添加onload事件來調用resizeIframe函數：

<iframe id="myIframe" src="https://example.com" onload="resizeIframe()"></iframe>

這段代碼會在iframe加載完成時調用resizeIframe函數，從而設置iframe的高度為內容的高度。

四、iframe自適應窗口大小

有時候我們希望iframe大小能夠根據窗口大小自適應。我們可以使用resize事件來監聽窗口大小的變化，並在變化時更新iframe的大小。

首先，在iframe中添加以下代碼：

<iframe id="myIframe" src="https://example.com"></iframe>

然後，在父頁面中添加以下代碼：

<script>
    window.addEventListener('resize', function() {
        var iframe = document.getElementById('myIframe');
        if (iframe) {
            iframe.style.width = '100%';
            iframe.style.height = (window.innerHeight - iframe.offsetTop) + 'px';
        }
    });
</script>

這段代碼會在窗口大小改變時調用匿名函數，從而更新iframe的大小。其中，iframe.offsetTop是指iframe距離文檔頂部的距離，window.innerHeight是指窗口的內部高度。

五、iframe自適應div

有時候我們需要將iframe放置在一個div中，並讓iframe自適應div的大小。我們可以使用絕對定位來實現這一點。

首先，在HTML中添加一個包含iframe的div：

<div id="myDiv" style="position: relative; width:100%; height:300px;">
  <iframe src="https://example.com" style="position: absolute; top:0; left:0; bottom:0; right:0;width:100%; height:100%;"></iframe>
</div>

這段代碼中，我們設置了div的寬度為100%，並且將position設置為relative，這樣，我們就可以在div中使用絕對定位了。然後，在iframe中將position設置為absolute，使其相對於父div定位。我們也可以控制iframe的位置和大小，使其填充整個div。

最後，我們可以使用與步驟三類似的方法實現iframe自適應div高度的效果。

六、iframe自適應寬度

在步驟五中，我們展示了如何讓iframe自適應div的寬度。如果我們只想讓iframe自適應其寬度，而不是適應div的寬度，我們可以使用下面的代碼：

<iframe src="https://example.com" frameborder="0" style="position:absolute; top:0; left:0; width:100%;"></iframe>

這段代碼中，我們使用CSS屬性position和top、left等來控制iframe的位置，使其佔據整個父元素的寬度。這樣，當瀏覽器窗口大小改變時，iframe也會自動調整其寬度。

七、iframe自適應頁面高度

在步驟一中，我們已經展示了如何讓iframe自適應整個頁面大小。如果我們只想讓iframe自適應頁面的高度，我們可以使用下面的代碼：

<iframe src="https://example.com" frameborder="0" style="position:fixed; top:0; left:0; right:0; width:100%;" scrolling="no"></iframe>

這段代碼中，我們使用CSS屬性position和top、left等來控制iframe的位置，使其佔據整個頁面的寬度，並將right屬性設置為0，使其鋪滿頁面。我們還將scrolling屬性設置為no，以禁用iframe的滾動條。這樣，當頁面高度改變時，iframe也會自動調整其高度。

八、iframe缺點

雖然iframe有很多優點，但是也存在一些缺點。首先，搜索引擎很難對iframe中的內容進行索引，因為iframe被視為單獨的文檔。其次，如果嵌入的頁面中存在惡意代碼，可能會對父頁面造成安全威脅。此外，iframe的性能也有所下降，因為其會增加頁面的加載時間和渲染時間。

九、設置iframe高度自適應

在步驟三中，我們展示了如何使用js讓iframe高度自適應。如果我們只想使用CSS實現相同的效果，我們可以使用下面的代碼：

iframe {
  height: calc(100vh - 50px);
}

這段代碼使用CSS3屬性calc計算iframe的高度。其中，100vh表示窗口的總高度，50px是預設的頂部和底部的空白高度。這樣，當窗口大小發生變化時，iframe也會自適應。需要注意的是，這種方法只適用於高度固定的頂部和底部，否則需要使用js來動態計算高度。

十、iframe頁面自適應選取

在使用iframe時，應該根據需求選擇適當的自適應方法。如果我們只是想讓iframe自適應整個頁面或自適應設備大小，可以使用步驟一和步驟二中的方法。如果我們需要讓iframe自適應父元素或設定固定高度，可以使用步驟五、六和九中的方法。如果我們需要動態計算iframe高度，可以使用步驟三中的方法。總之，應該根據具體情況選擇最合適的方法。