Accessing an iframe document (contentWindow) - JavaScript Tutorial

In this video we take a look at the contentWindow and contentDocument properties of an embedded iframe - it allows access to the underlying "window" and "document" objects of the HTML page.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #webdev

[dcode-software]

*RELATED VIDEO: SEND DATA BETWEEN TABS IN JAVASCRIPT*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[christianhelwig]

Thank you!!! You helped me figure something out I was working on for four hours. This enabled me to understand multiple codes I was working with. Thank you!

[TECHINSPEC]

This is for the Same-origin Iframe only... You can't access iframe from the different domain using the method explained in this video

[heatvisuals]

I like the typing sound effects. Sounds real af

[Tmmy]

What if the origin of the iframe is at a different origin, i.e. not local to the page? Is something similar possible that yeilds the same outcomes?

[omarzaky]

You are the best javascript programmer in the world. Thank you very much 🌹

[leopoldosantiago]

Meu amigo gringo, muito obrigado! Sua solução é simples e fácil de implantar. Parabéns!

[hessiride]

This example shows that will only work for local pages however if you link the iframe to another link it will be dom exception for x-frame error

[newcomer]

This channel has solution for almost every problem

[valentinagajic]

This is ok, when pages are from same source, but how to do that if we embed in iframe some other website? Can we manipulating with objects of that?

[murtazamohammadi]

I have one question about Iframe: I displayed an external website in my angular project, inside external website I have a link to open pdf. if I click on that link, it will be opened in a new tab. I want to open it inside the iframe. how can I do that. I would be very happy hearing back from you thanks

[wowwwww]

Thank you for this great video. Can you post a version with an onload-execution? As soon as the script is loaded, some JS-code should be executed.

[nishilsuthar]

But what can I do this if the iframe component is comming from another origin

[stig]

how do i change the file inside an iframe to another at runtime

[abusalahamusazangi]

How to insert a script within a head tag of an iFrame if the iFrame has no id attributes?

[vivianeasaraiva]

Hi, please could you do a video showing how to use Javascript to change content inside iframe every 5s? That would be very helpfull

[zqgAFf]

I am a bit curious how to get the console content from this iframe and show it somewhere else in the web browser not in the developer tools

[thelostman]

*Question:*
How can I open external application (on mobile) using JavaScript (create open-in-app feature)?

[vicente]

Hello, tnx for this video is very helpful. I just want to ask if is possible to do the same staff but with the button inside the iframe? for example i want to push the button and then close the do a z-index in order to hidde it.

Kind regards.

[vmars]

Do I need the .css to make it run error free ?
const iframeDocument = myIframe.contentDocument;
Why does this statemment retern null ?:
console.log(iframeDocument) // ? = null
WHy does this starement give me this error:
Uncaught TypeError: Cannot read property 'querySelector' of null

= lightgreen ;
I have typed out your code many times, but it always gives errors .
Can I get a copy of the source code .
Thanks