问题比较特殊,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事件来监听发送跨文档消息传输内容。
<span style="font-size:14px;">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
}
}
);
}
}
});</span>
页面加入该directive
<span style="font-size:14px;"><div class="container-fluid " ui-view ng-app-frame></div></span>
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<span style="white-space:pre"> </span>" marginheight="0"></iframe>
</div>
<div class="axaFooterbg"></div>
</body>