iframe高度自适应

方案一

参考文案http://blog.csdn.net/alex8046/article/details/51456131

<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

function changeFrameHeight(){
    var ifm= document.getElementById("myiframe"); 
    ifm.height=document.documentElement.clientHeight;
}
window.onresize=function(){  
     changeFrameHeight();  
} 

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

onresize 事件会在窗口或框架被调整大小时发生。(支持该事件的javascript对象为window)

直接将iframe的高度定义为浏览器可见区域高度，当浏览器可见高度发生改变时，执行js事件改变iframe高度。

 

方案二

参考文案http://caibaojian.com/iframe-adjust-content-height.html

iframe内容未知，高度可预测

这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度。

 

function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};

window.onload = function () {
setIframeHeight(document.getElementById('external-frame'));
};

 

<iframe src="backtop.html" frameborder="0" scrolling="no" id="external-frame" onload="setIframeHeight(this)"></iframe>

contentWindow contentDocument 在本地访问浏览器无法获取值 提示拒绝访问

需要将其放入服务器内之后便能获取值

 

contentDocument