問題比較特殊，google了好久才得到啟示
開發的angular頁面，需要嵌入到客戶的web頁中，以iframe方式。由於iframe的高度需要指定，而angular動態生成機制導致頁面高度會隨時變化，
就會出現2個滾動條，一個是頁面本身，一個是iframe里的。
解決方法如下：
1.寫一個directive監聽angular的$digest，實時獲取body高度，通過 HTML5 postMessage方式傳出
在HTML5中新增了postMessage方法，postMessage可以實現跨文檔消息傳輸（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。該方法可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。
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"> <iframe src="../../whatever" id="win" width="100%" height="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe> </div> <div class="axaFooterbg"></div> </body>