postMessage解決iframe自適應(yīng)高度方法
在localhost环境下
------------------------------父页面-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="child.html" id="ifr"></iframe>
<script type="text/javascript">
window.onload=function(){
var ifr=document.getElementById('ifr');
ifr.contentWindow.postMessage('a','*');
window.addEventListener('message',function(e){ var oHeight=e.data;
},false);
};
</script>
</body>
</html>
-------------------------------子页面------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
window.addEventListener('message',function(e){
var bodyHeight=document.body.scrollHeight;
e.source.postMessage(bodyHeight,'http://localhost');
},false);
};
</script></head>
<body>
一堆东西。。。。自行添加
</body>
</html>
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
