angular项目中使用iframe相关问题

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