在角度2中更改iframe内元素的属性

Question

我想在角度2打字稿中更改iframe内部元素的属性,类似于javascript代码

document.getElementById('iframeId').window.document.getElementById('home-grid').style.visibility = "hidden";

我的Angular打字稿代码:

var iframe   = document.getElementById('iframeId');
var insideDoc = iframe.contentDocument || iframe.contentWindow.document;

编译代码时出错:

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: ./angularapp/web/component/mainPage/mainPage.ts
?[37m(?[39m?[36m35?[39m,?[36m32?[39m): ?[31merror TS2339: Property 'contentDocument' does not exist on type 'HTMLElement'.?[39m./angularapp/web/component/mainPage/mainPage.ts
?[37m(?[39m?[36m35?[39m,?[36m58?[39m): ?[31merror TS2339: Property 'contentWindow' does not exist on type 'HTMLElement'.?[39m

有没有办法在角度2中实现这一点？请帮忙

Answer 1

@Component({
  selector: 'my-app',
  template:`
    <h1>Selecting Number</h1>
    <iframe id="iframeId" src="iframe.html" (load)="onLoad()"></iframe>
  `,
})
export class App {
  onLoad()  {
    var iframe   = document.getElementById('iframeId');
    var iWindow = iframe.contentWindow
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    console.debug(doc);
    console.log(doc.getElementById('foo').innerText);
  }
}

Plunker演示