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

Answer 1

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

Answer 2

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