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: http://stackoverflow.com/questions/6000987/dynamically-set-iframe-src — muchwow, Jun 22 '15 at 14:38
Are there any console errors? Does the page exist and correct path etc? — StudioTime, Jun 22 '15 at 14:42

score 2 · Accepted Answer · answered Jun 22 '15 at 14:43

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 '15 at 14:43

Joseph Didion

142
1
6

That did the trick...wow thanks. Do you know why the form tags screwed it up? – kyle_13 Jun 22 '15 at 14:47

score 2 · Answer 2 · answered Jun 22 '15 at 21:43

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.

Update iframe src attribute dynamically with JavaScript

2 Answers2