Question

我在angular2组件中有一个iframe，我试图通过访问contentWindow来更改iframe的内容。
iframe应该包含一个简单的按钮。

我的代码：

    import { Component } from '@angular/core';
    @Component({
      moduleId: module.id,
      selector: 'component-iframe',
      template: '<iframe id="iframe"></iframe>'
    })
    export class ComponentIframe  {
      constructor() {
        let iframe = document.getElementById('iframe'); 
        let content = '<button id="button" class="button" >My button </button>';
        let doc =  iframe.contentDocument || iframe.contentWindow;
        doc.open();
        doc.write(content);
      doc.close();
    }
   }

如果我评论构造函数的代码并启动应用程序，它会编译并正确运行。然后我取消注释并完全运行（按钮出现在iframe中）。

如果我取消代码然后启动应用程序（npm start）我有编译错误消息：

属性'contentWindow'在'HTMLElement'
类型上不存在

我还尝试了将costructor的代码放入ngOnInit（），ngAfterContentInit（），ngAfterViewInit（）的替代方法，但错误仍然存在。

Answer 1

当执行构造函数时，DOM中不存在模板

改为使用

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'component-iframe',
  template: '<iframe #iframe></iframe>'
})
export class ComponentIframe  {
  @ViewChild('iframe') iframe: ElementRef;

  ngAfterViewInit() {
    let content = '<button id="button" class="button" >My button </button>';
    let doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
    doc.open();
    doc.write(content);
    doc.close();
  }
}

Answer 2

使用它：

let iframe = document.getElementById('iframe') as HTMLIFrameElement

Answer 3

我通过以下方式解决了这个问题：

const element: HTMLIFrameElement = document.getElementById('iframe') as HTMLIFrameElement;
const iframe = element.contentWindow;
if (iframe !== null) {
  ...
}

Answer 4

如果 IFRAME 的内容是由同源创建的，那么我建议使用IFRAME属性 srcDoc 进行设置和更改IFRAME中的内容。

intern

请参阅此PLUNKER DEMO

这将使原生HTML元素不受影响，与Angular Universal保持兼容。

Answer 5

我通过以下方式解决了这个问题：

 var ID = document.getElementById("Iframe");
 var Iframe = eval("(ID.contentWindow || ID.contentDocument)");
 Iframe.CallIframeFunction();

Answer 6

或使用现在著名的Typescript解决方法：

iframe['contentWindow']

在angular2内部的iframe，'HTMLElement'类型中不存在属性'contentWindow'

6 个答案: