postMessage解决iframe自适应高度方法-原创手记-慕课网

postMessage解决iframe自适应高度方法

小牛牛天天快乐 2017-06-20 09:51:24 浏览 3596

小牛牛天天快乐

关注TA

手记 15

粉丝 6

获赞 568

在localhost环境下
------------------------------父页面-------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="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>

0人推荐

发表评论