iFrame上的Angular,onLoad函数

时间:2013-04-08 14:53:44

标签: iframe angularjs

我让这个iframe使用基本的JavaScript:

<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>

当加载iframe的内容时,会触发方法uploadDone();

我如何在Angular中做同样的事情?我想在iframe加载时调用控制器上的函数,但到目前为止我还没有看到ng-onload

5 个答案:

答案 0 :(得分:110)

评论一年前的问题。 对于有超过1个iframe的情况,我需要绑定&#34; onload&#34;事件发生在。 我采用了这种方法。

指令

APP.directive('iframeOnload', [function(){
return {
    scope: {
        callBack: '&iframeOnload'
    },
    link: function(scope, element, attrs){
        element.on('load', function(){
            return scope.callBack();
        })
    }
}}])

控制器

APP.controller('MyController', ['$scope', function($scope){

    $scope.iframeLoadedCallBack = function(){
        // do stuff
    }
}]);

DOM

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

答案 1 :(得分:26)

尝试在控制器中定义函数:

window.uploadDone=function(){
  /* have access to $scope here*/
}

答案 2 :(得分:4)

对于任何到此为止的人来说,ng-onload插件是解决此问题的完美解决方案。它没有污染全局命名空间,并且当你想要的只是调用一个简单的范围函数时,并不要求你创建一次性指令。

答案 3 :(得分:4)

对于使用Angular 2+的任何人, 很简单:

<iframe (load)="uploadDone()"></iframe>

没有全局功能,可与多个iframe一起使用。

答案 4 :(得分:0)

对于那些动态注入 iframe 的,您可以执行以下操作

html...

<div #iframeContainer></div>

ts...

@Component({
  selector: 'app-iframe-onload',
  templateUrl: './iframe-onload.component.html'
})
export class IframeOnload implements AfterViewInit {

@ViewChild('iframeContainer') iframeContainer: ElementRef;

ngAfterViewInit(): void {
  this.injectIframe();
}

private injectIframe(): void {
  const container = this.iframeContainer.nativeElement;
  const iframe = document.createElement('iframe');
  iframe.setAttribute('width', '100%');
  iframe.setAttribute('src', 'https://example.com/');
  iframe.setAttribute('height', 'auto');
  iframe.setAttribute('frameBorder', '0');
  iframe.addEventListener('load', this.iframeOnLoadtwo);
  container.appendChild(iframe);

}

public iframeOnLoadtwo(): void {
  console.log('iframe loaded...');
}

}