How to access iframe from main document javascript

Question

I am using an iframe provided by a third party company (due to what our business is, it's either pay for an iframe, or pay for them to build a website, and the iframe was better suited for what we need) However, there are certain things that we can't do with the iframe, which would be useful. However, as it's things which are temporary, and cost a few hundred £ each time we want to change anything, it would be better if we could access it via the parent page, which contains the iframe.

For example, we have a form in the iframe which defaults to a certain product (depending on the page) you are on, however you can search for others. However, for some products we don't currently deal with them, so it would be nice to be able to have an alert box which pops up on the main page, which tells the user we don't deal with this.

For example, if in someone types "Swimming Party" we could have a message pop up that says "Sorry, we currently can't offer any swimming parties, however if you call NUMBER we will book one for you as soon as possible" And also, if someone types in we would be able to capitalize the first letter if someone put the name as "steve" and not "Steve" (for example)

Sorry if this isn't very descriptive of what we need, but we've never really had to deal with an issue like this, however, the limitations imposed mean we have to look for a simple sounding solution to a much more complex problem.

If your main page loads the customers page through a window.open call, you can refer to the content inside the iframe through the variable window.open returns. If you support html5, you can use the window.postMessage API to communicate between the different frames. Other options exist, like injecting extra scripts into the iframe to parse iframe urls etc, but are less desirable and/or performant imho. — Shilly, Aug 19 '15 at 11:40
But will this work when we don't have access to the iframe, at all? The company who created it use the same thing for multiple businesses, and they won't add stuff unless it is absolutely necessary :/ — jordsta95, Aug 19 '15 at 13:18
What do you have control over? Only the parent window containing the iframe or only the content inside the iframe? — Shilly, Aug 20 '15 at 08:50
You can access the iframe: `document.querySelector('yourIFrameID').document`. Then you can select anything from the iframe. I haven't tested if you can script directly in the frame, but it would be perfect if you can add more event handlers to the form inside the frame. — Shilly, Sep 01 '15 at 14:30
Yeah, I tried doing that, however, it seems I am unable to do anything like check for "name" and turn to "Name" — jordsta95, Sep 02 '15 at 12:57
possible duplicate of [jQuery/JavaScript: accessing contents of an iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) — smnbbrv, Sep 02 '15 at 15:23

score 1 · Answer 1 · answered Sep 02 '15 at 15:22

Try contentDocument or contentWindow.document. The mockup below works for me. Some notes:

1) You have to wait for the whole document to be loaded, i had a tiny bit of trouble with selecting the iframe before the content was loaded. If you sue jquery, this won't be a problem. ;)

2) If the contents of the iframe are cross domain, you'll have to inject some script into the iframe to extract the html nodes you're interested in.

Main Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" /> 
    <title>Main</title>
</head>
<body id="mainbody">
    <div>MAIN</div>
    <iframe id="myFrame" src="test_3.html"></iframe>
    <script src="test.js"></script>
</body>
</html>

Iframe Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Inner</title>
</head>
<body id="iframebody"><div id="nameDiv">MY NAME</div></body>
</html>

Script

document.body.onload = function() {
    document.querySelector('#myFrame').contentDocument.querySelector('#nameDiv').textContent = 'NEW NAME';
};

How to access iframe from main document javascript

1 Answers1