iframe高度自适应

问题: 在angular项目中需要嵌入第三方页面,通过iframe来实现,但是嵌入的页面高度未知。

解决方案:自定义一个angular指令,监听iframe的onload事件来获取iframe中内容的高度。

源码:

angular 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义指令
App.directive('iframeOnload', [function(){
return {
scope: {
callBack: '&iframeOnload'
},
link: function(scope, element, attrs){
element.on('load', function(){
// 关键是这个
element.height(element.contents().outerHeight());
return scope.callBack();
});
}
}}]);
App.controller('MyController', ['$scope', function($scope){
$scope.iframeLoadedCallBack = function(){
// do stuff
}
}]);

在DOM中使用

1
2
3
<div ng-controller="MyController">
<iframe iframe-onload="iframeLoadedCallBack()" src="..."></iframe>
</div>

解决方案来源:Angular, onLoad function on an iFrame

Contents
  1. 1. iframe高度自适应