iFrame 上的 Angular、onLoad 函数答案

【问题标题】：Angular, onLoad function on an iFrameiFrame 上的 Angular、onLoad 函数
【发布时间】：2013-03-30 17:24:30
【问题描述】：

我有这个 iframe 可以使用基本的 JavaScript：

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

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

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

【问题讨论】：

标签： iframe angularjs

【解决方案1】：

尝试将控制器中的函数定义为：

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

【讨论】：

还有传递角度参数的选项吗？如code
这样做的缺点是它将全局函数与 Angular 代码混合在一起。它有效，但可能会令人困惑。例如。 “其他阅读代码的人会期望在控制器中找到它吗？它会与其他任何东西冲突吗？”

【解决方案2】：

评论一个一年前的问题。对于 iframe 超过 1 个的情况，我需要将“onload”事件绑定到。我采用了这种方法。

指令

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>

【讨论】：

完美，感谢这个指令。我将指令中的回调调用更改为：return scope.callBack(element);，这样我就可以在我的函数中读取元素属性。
嗯，或者您甚至可以将其作为承诺返回！
我尝试传递元素但无法访问，有没有一个小的工作演示可以分享？
确保你的回调是一个函数，iframe-onload="iframeLoadedCallBack()" 确保你的回调接受一个参数 $scope.iframeLoadedCallBack = function(element) {...}跨度>
Miguel，您的解决方案效果很好！但是，对于复制粘贴代码的人，请在销毁时解开事件处理程序：scope.$on('$destroy', function() { element.off('load'); })

【解决方案3】：

对于任何在这里结束的人，ng-onload 插件是解决此问题的完美解决方案。它不会污染全局命名空间，并且当您只想调用一个简单的作用域函数时，也不需要您创建一次性指令。

【讨论】：

ngOnload 似乎只针对 Angular 1.5.x 的 contentWindow 返回 undefined。你在这个版本的 AngularJS 上使用过它并成功了吗？

【解决方案4】：

对于使用 Angular 2+ 的任何人，很简单：

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

无全局函数，适用于多个 iframe。

【讨论】：

@hajjin 在 uploadDone 完成之前我如何显示加载器
你可以有一个变量showLoader，并根据它的值显示加载器。加载开始后将其设置为true。并在 uploadDone 中将其设置为 false。

【解决方案5】：

对于那些动态注入 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...');
}

}

【讨论】：