Change the property of element inside iframe in angular 2

Question

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

@Günter Zöchbauer. The question is not the duplicate of the link provided as my question is to get the element from within an iFrame in angular 2 and i dont find any link similar to it. If the answer is available already kindly share the link for it. — AishApp, Apr 11 '16 at 04:44
There is nothing special in Angular, it's the same as in JavaScript. — Günter Zöchbauer, Apr 11 '16 at 04:45
But i am getting the error as mentioned in my question. "Property 'contentWindow' does not exist on type 'HTMLElement'". Do i have import anything to achieve this? — AishApp, Apr 11 '16 at 04:46
Your code doesn't look like the one in the accepted answer of the linked question. Your question doesn't provide enough information to debug your problem anyway. I'm fine with reopening the question if you show that your problem can't be solved with the linked answer. — Günter Zöchbauer, Apr 11 '16 at 04:47

score 13 · Accepted Answer · answered Apr 11 '16 at 05:34

13

@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

answered Apr 11 '16 at 05:34

Günter Zöchbauer

623,577
216
2,003
1,567

I have similar steps in my file. but i am still getting the compile error mentioned above. Do i have to import anything to get this HTMLElement? – AishApp Apr 11 '16 at 06:01
6

try `var iWindow = (iframe).contentWindow;` – Günter Zöchbauer Apr 11 '16 at 06:05
2

var iframe = document.getElementById('iframeId'); var doc = (iframe).contentDocument || (iframe).contentWindow.document; console.log("Iframe returns ",iframe); console.log("Doc returns ", doc); iframe returns the entire document while the variable 'doc' returns null. – AishApp Apr 11 '16 at 07:08
Since iframe is of type HTMLELEMENT, it works. ContentWindow and contentDocument are not accessible from type HTMLElement. When i typecast to HTMLIFrameElement, var doc returns null. What is the solution to get this done? – AishApp Apr 11 '16 at 07:12
I don't get the problem. If casting works, why don't you just do it? This is only for static analysis, casting is irrelevant for runtime. Your code will still work. – Günter Zöchbauer Apr 11 '16 at 07:16
As you said, my code compiles without any issues. But var doc returns empty header and body tag with which i am unable to access any elements in my iframe. – AishApp Apr 11 '16 at 07:27
Can you reproduce in a Plunker. The Plunker linked in my answer seems to to what you want, no? – Günter Zöchbauer Apr 11 '16 at 07:28
Your plunker code works exactly as i wish. I am using the same code here still facing issues :( – AishApp Apr 11 '16 at 07:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/108786/discussion-between-aish123-and-gunter-zochbauer). – AishApp Apr 11 '16 at 07:30
1

For some reason the load event is triggered twice, anyone having the same issue? – realappie Mar 17 '17 at 12:53
http://stackoverflow.com/questions/42677931/onload-happening-multiple-times-with-iframe/42677996#42677996 is about exactly that problem. It's a Chrome issue. The linked answer shows how to avoid. – Günter Zöchbauer Mar 17 '17 at 13:18
1

good, 'ionic serve" not working, 'ionic cordova run android -lcs' not working because live reload cause error, only 'ionic cordova run android' is working. Thank for your answer, it work now for me – Hiep Tran Feb 07 '18 at 03:38

Change the property of element inside iframe in angular 2

1 Answers1