iframe根据子页面自动调整大小（两种方法）
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 src=“js/iframeResizer.contentWindow.min.js” type=“text/javascript”>< /script>
5.为兼容IE8+,还要添加如下。
< meta http-equiv=“X-UA-Compatible” content=“IE=edge”>