我让这个iframe使用基本的JavaScript:
<iframe id="upload_iframe" name="upload_iframe" onLoad="uploadDone();"></iframe>
当加载iframe的内容时,会触发方法uploadDone();
。
我如何在Angular中做同样的事情?我想在iframe加载时调用控制器上的函数,但到目前为止我还没有看到ng-onload
。
答案 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...');
}
}