Update iframe src attribute dynamically with JavaScript

Question

I'm trying to update an iframe on a page using JavaScript, but it's not working. This example seems pretty straightforward, but the page is not loading the iframe with the new page once I click the button. I'm doing this all locally.

<html>
    <body>
    <script>
    function changeIframeSrc() {
        document.getElementById('myFrame').src = "test2.html";
    }
    </script>
    <form>
    <button onclick="changeIframeSrc()">Click here</button>
    <iframe id="myFrame" src="test1.html"></iframe>
    </form>
    </body>
    </html>

Possible duplicate: stackoverflow.com/questions/6000987/dynamically-set-iframe-src — muchwow
– muchwow, Commented Jun 22, 2015 at 14:38
Are there any console errors? Does the page exist and correct path etc? — StudioTime
– StudioTime, Commented Jun 22, 2015 at 14:42

Joseph Didion · Accepted Answer · 2015-06-22 14:43:47Z

2

Just remove The form tags

<html>
<body>
<script>
function changeIframeSrc() {
    document.getElementById('myFrame').src = "test2.html";
}
</script>
<button onclick="changeIframeSrc()">Click here</button>
<iframe id="myFrame" src="test1.html"></iframe>
</body>
</html>

answered Jun 22, 2015 at 14:43

Joseph Didion

1421 silver badge6 bronze badges

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

1 Comment

kyle_13 Over a year ago

That did the trick...wow thanks. Do you know why the form tags screwed it up?

Nisse Engström · Accepted Answer · 2015-06-22 21:43:51Z

The script does load the new <iframe>. The problem is that the <form> is also submitted (if the browser supports implicit form submission) which then reloads the page with the original <iframe>.

One simple solution is to remove the <form> element. Without a <form> element, there can be no form submission:

<!--form-->
 <button onclick="changeIframeSrc()">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
<!--/form-->

Another is to prevent the default action of the <button> by returning false from the onclick handler:

<form>
 <button onclick="changeIframeSrc(); return false;">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
</form>

However, there is a problem with these solutions. If the browser doesn't execute the script, or the script fails in some unanticipated way, the user is left with a dead button. Ideally, the button should submit the form in a useful way when the script doesn't run. Eg.:

<form>
 <button name=frame value=2 onclick="changeIframeSrc(); return false;">Click here</button>
 <iframe id="myFrame" src="test1.html"></iframe>
</form>

The add some server-side code that outputs the form, but with src="test2.html" as the default <iframe> source if the page is requested with the form data frame=2.

Collectives™ on Stack Overflow

Update iframe src attribute dynamically with JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related