Using JavaScript to change local src of an HTML iframe

Question

Lets say you have a main .html:

<!DOCTYPE html>
<html>
<head>
    <title>Page One</title>
    <script type="text/javascript" src="javaS.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="main">
<h3>Test switching html content inside iframe</h3>
<p>iframe:</p>
<iframe src="" id="iframe1"></iframe>
</body>
</html>

And a secondary .html:

<!DOCTYPE html>
<html>
<head>
    <title>Page two</title>
    <link rel="stylesheet" type="text/css" href="CSS.css">
</head>
<body id="test">
<h3>Test subject</h3>
<p>subjugate text</p>
</body>
</html>

How would you display the local second .html inside the iframe element of the first .html, using only JavaScript?

I have tried using these snippets:

window.onload = function() {window.frames['iframe1'].location.replace("Secondary.html");}

.

var iframe = document.getElementById('iframe1');
iframe.src = "second.html";

...But these haven't worked. I'm new at this so the answer might be fairly obvious, but any guidance would be very much appreciated!

Lance · Accepted Answer · 2015-10-30 20:48:01Z

2

I use this and it works well:

window.onload = function()
{
    document.getElementById('iframe1').src = "Secondary.html";
}

answered Oct 30, 2015 at 20:48

Lance

3,9424 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek Foulk · Accepted Answer · 2015-10-30 20:47:30Z

1

document.getElementsByTagName("iframe")[0].setAttribute("src", "http://your-url.com");

answered Oct 30, 2015 at 20:47

Derek Foulk

1,9121 gold badge19 silver badges37 bronze badges

Comments

Igor · Accepted Answer · 2015-10-30 20:50:15Z

1

Your second snippet is perfect. You just have to make sure that it runs when iframe DOM element exists - in window.onload.

answered Oct 30, 2015 at 20:50

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Comments

Adam Buchanan Smith · Accepted Answer · 2015-10-30 20:59:45Z

1

I just combined the two exampples you had tried to make one working example, see here: https://jsfiddle.net/4p18mxg9/9/

var iframe = document.getElementById('iframe1');
window.onload = function() {
    iframe.src = "second.html";
}

answered Oct 30, 2015 at 20:59

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Using JavaScript to change local src of an HTML iframe

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related