标签：explorer 解决 style 解决方法 targe pos 启示 ret lib
问题比较特殊，google了好久才得到启示
开发的angular页面，需要嵌入到客户的web页中，以iframe方式。由于iframe的高度需要指定，而angular动态生成机制导致页面高度会随时变化，
就会出现2个滚动条，一个是页面本身，一个是iframe里的。
解决方法如下：
1.写一个directive监听angular的$digest，实时获取body高度，通过 HTML5 postMessage方式传出
module.directive(‘ngAppFrame‘, function () { return { restrict: ‘EA‘, link: function (scope, element, attrs) { element.css("display", "block"); scope.$watch( function () { return element[0].offsetHeight; }, function (newHeight, oldHeight) { if (newHeight != oldHeight) { setTimeout(function () { var height = attrs.minheight ? newHeight + parseInt(attrs.minheight) : newHeight; var message = height; window.parent.postMessage(message, "*"); }, 0);// timeout needed to wait for DOM to update } } ); } } });
页面加入该directive
<div class="container-fluid " ui-view ng-app-frame></div>
2.iframe 父窗口监听message，获取iframe传出的动态高度并设定
<script> window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { var iframe = document.getElementById("win"); iframe.height = event.data; } </script> <body> <div class="axaHeaderbg"></div> <div class="axa_inner_b2c"> lt;iframe src="../../whatever" id="win" width="100%" height="100%" scrolling="no" frameborder="0" marginwidth="0<span style="white-space:pre"> </span>" marginheight="0"></iframe> </div> <div class="axaFooterbg"></div> </body>
标签：explorer 解决 style 解决方法 targe pos 启示 ret lib
原文地址：http://www.cnblogs.com/babietongtianta/p/6518719.html
