Reload iframe content (local HTML) when clicking buttons

Question

I´m loading HTML file into a DIV (iframe) when user click on a button.

My problem is when click another button and need to reload the iframe with another HTML file.

This is my code:

<script type="text/javascript">
$(function(){
    $('#2015').click(function(){
        if(!$('#iframe').length) {
                $('#content').html('<iframe id="iframe" src="2015.html" width="700" height="450"></iframe>');
        }
    });
});
</script>

And here is the button code:

<a href ="#" id="2015">2015</a>

How can I remove the iframe content before to load the next HTML into it?

http://stackoverflow.com/questions/4249809/reload-an-iframe-with-jquery — Jonathan, Mar 11 '16 at 21:03

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

You made a mistake here. An ID must not start with a number. So use btn2015 instead of 2015 as ID on the button.

The link should do the rest:

Reload an iframe with jQuery

edited May 23 '17 at 12:33

Community

1
1

answered Mar 11 '16 at 21:15

Jonathan

1,685
2
18
25

score 0 · Answer 2 · edited Mar 19 '16 at 07:49

0

Thanks Jonathan.

Changing the ID and minor changes is working fine.

I´m testing another way and is working too:

Assign a "name" to the iframe with the default HTML:
```
<iframe name="year" src="2015.html"></iframe>
```
Direct <a> link with the URL and iframe "name" as target:
```
<a href="2014.html" target="year">Change Link</a>
```

edited Mar 19 '16 at 07:49

Mr Lister

45,515
15
108
150

answered Mar 11 '16 at 22:34

Pedro Javier Bernal Martínez

5
1
6

Reload iframe content (local HTML) when clicking buttons

2 Answers2