Control iframe content with javascript/html

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?)


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 :)


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");