Change the property of element inside iframe in angular 2

问题

I would like to change the property of an element inside iframe in angular 2 typescript similar to the javascript code

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

My Angular typescript code:

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

Error on compiling the code:

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

Is there any way to achieve this in angular 2? Please help

回答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 demo

来源：https://stackoverflow.com/questions/36513929/change-the-property-of-element-inside-iframe-in-angular-2