iframe根據子頁面自動調整大小（兩種方法）

• （第一種）
• （第二種）

很多人估計會遇到這樣的情況，在IFrame嵌入某些頁面，總會出現滾動條，那麼有沒方法，可以讓IFrame随着嵌入頁面的内容大小自動調節大小而不出現滾動條呢？答案是肯定的，經過查找，發現了兩種方法，大家直接引用就好

（第一種）

在要嵌入的頁面添加js：

//iframe高度自适應

　　function IFrameReSize(iframename) {

var pTar = document.getElementById(iframename);

if (pTar) { //ff

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) {

pTar.height = pTar.contentDocument.body.offsetHeight;

} //ie

else if (pTar.Document && pTar.Document.body.scrollHeight) {

pTar.height = pTar.Document.body.scrollHeight;

}

}

}

//iframe寬度自适應

function IFrameReSizeWidth(iframename) {

var pTar = document.getElementById(iframename);

if (pTar) { //ff

if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth) {

pTar.width = pTar.contentDocument.body.offsetWidth;

} //ie

else if (pTar.Document && pTar.Document.body.scrollWidth) {

pTar.width = pTar.Document.body.scrollWidth;

}

}

}

在首頁面要嵌入的地方寫入：

　　< iframe src=“Main.aspx” scrolling=“no” frameborder=“0” height=“100%” id=“mainFrame” width=“100%” οnlοad=‘IFrameReSize(“mainFrame”);IFrameReSizeWidth(“mainFrame”);’>< /iframe>

（第二種）

發現用IframeResizer腳本可以很好解決此問題，并且它是跨域名的，即使嵌入的是第三方頁面，不需繁雜處理，幾個步驟就可以使它自動調節寬度和高度。

1.首先下載下傳iframe-resizer最新版本，現在是v2.5.2, 位址：

https://github.com/davidjbradshaw/iframe-resizer/zipball/master

2.在放Iframe的頁面，引入iframeResizer.min.js腳本，并且進入如下初始化。

< script type=“text/javascript”>

iFrameResize({

log : true, // Enable console logging

enablePublicMethods : true, // Enable methods within iframe hosted page

});

< /script>

3.添加的Iframe,還要進行如下設定，寬度設定成百分比,scrolling設成no .

如：

< iframe src=“http://anotherdomain.com/frame.content.html” width=“100%” scrolling=“no”>< /iframe>

4.在被嵌入的頁面，添加如下腳本.

< script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></ script>

< script src=“js/iframeResizer.contentWindow.min.js” type=“text/javascript”>< /script>

5.為相容IE8+,還要添加如下。

< meta http-equiv=“X-UA-Compatible” content=“IE=edge”>