Control iframe content with javascript/html

Question

Within my webpage I have an iframe like so:

<iframe src="thispage.html" width="100%" height="600" frameBorder="2"></iframe>

(The iframe is of a page on the same site...)

My question is, is it possible to use javascript on the page that has the iframe to control the 'thispage.html' (like use javascript functions?)

thispage.html is the main html file or the file you are loading into iframe. — Bharath R, Oct 21 '13 at 15:33

score 15 · Accepted Answer · edited Mar 01 '20 at 20:35

Yes you can. Say your iframe's ID is 'myIFrame'

<iframe id="myIFrame" src="thispage.html"
    width="100%" height="600"
    frameBorder="2">
</iframe>

Then, add the following in your JavaScript:

// Get the iframe
const iFrame = document.getElementById('myIFrame');

// Let's say that you want to access a button with the ID `'myButton'`,
// you can access via the following code:
const buttonInIFrame = iFrame.contentWindow.document.getElementById('myButton');

// If you need to call a function in the iframe, you can call it as follows:
iFrame.contentWindow.yourFunction();

Hope it helps :)

score 2 · Answer 2 · answered Oct 21 '13 at 15:35

Yes, if you give your iframe an ID, for example

<iframe src="thispage.html" width="100%" height="600" frameBorder="2" id="MyIframe"></iframe>

You can access the inner window like this:

var iw = document.getElementById("MyIframe").contentWindow;

So you can call its functions e.g.

iw.theFunctionInsideIframe();

And you can locate the DOM elements like

var anElement = iw.document.getElmentByID("myDiv");

Control iframe content with javascript/html

2 Answers2

Linked