如何检测iframe是否以角度完全加载答案

【问题标题】：how to detect if the iframe is fully loaded in angular如何检测iframe是否以角度完全加载
【发布时间】：2016-04-19 16:13:20
【问题描述】：

我是否可以检测 iframe 是否已完成加载？这是我的 iframe 代码：

<div ng-if="isLoadDone" class="col-xs-12">
    <div class="text-center"><span class="fa fa-spinner fa-pulse fa-5x fa-fw margin-bottom"></span></div>
  </div>
<iframe ng-if="isLoadDone" class="app-iframe" ng-src="{{trustedApplUrl}}"></iframe>

基本上，如果 iframe 未满载，我想显示微调器。我想检测 iframe 是否已完成加载而不是开始加载。我能够找到方法来确定 iframe 是否开始加载，但不是在 iframe 完成加载时。任何的想法？谢谢 -金

【问题讨论】：

我确实建议收听load 事件。但说真的，你问之前用过谷歌吗？！
是的，我在询问之前确实使用过 google，但我只看到了 load 事件
对，可能没有只使用角度的方法。
"load" 事件用于检测 iframe 何时加载，而不是 iframe 完成加载时。有什么建议如何找到 iframe 何时完成加载？
@Kim 这个问题你解决了吗？

标签： javascript angularjs iframe

【解决方案1】：

<iframe (load)="myLoadEvent()" id="myiframe"></iframe>

在组件中

myLoadEvent(){
// do your task
}

这适用于 angular6。这不是确定 iframe 是否已完全加载。但会帮助任何登陆这里进行 iframe 加载的人

【讨论】：

尽管问题在标题中说 Angular，但标签和代码都是 AngularJs。 这些不是同一个框架，所以虽然这段代码可能在 Angular 6 中工作，但它对于这个针对 AngularJs 1.x 的问题几乎没有用处。

【解决方案2】：

我发现了其他几种方法可以使其与 IE11 和 Angular 4 一起使用。

使用 Renderer2

<iframe #iframe id="iframe" name="pdfPreview" type="application/pdf"></iframe> this._rndr.listen(this.iframeRef.nativeElement, 'load', (e) => { alert("works"); }
给窗口添加回调

<iframe onload="loadEvent(event)" id="iframe" name="pdfPreview" type="application/pdf"></iframe> (window as any).loadEvent = (event) => alert("works too");

【讨论】：

方法 1 适用于嵌入 pdf 的对象元素。谢谢

【解决方案3】：

您可以使用ng-onload 处理此类事情。

<iframe ng-onload="myLoadEvent()" class="app-iframe" ng-src="{{trustedApplUrl}}"></iframe>

【讨论】：

ng-onload 是在 iframe 加载开始时检测到，而不是在 iframe 完成加载时检测到