0

I am working on a home page and I have an iFrame that i would like to be able to reload using a button.

I have two Javascript files that I will Label "J1" (for the first) and "J2" (for the second) and for the two HTML files I will label them "Hyper1" and "Hyper2".

The issue that I have come across with using the code below:

[Hyper1]

<button style="display: none" id="reload" class="tablinks" onclick="reload()">Reload</button>

[J2]

function reload() {
    window.location.reload();
}

so basically I have the code for the button on "Hyper1" and the function on "J2" (which is where the coding for the iframe is) and it still reloads the entire page and not just the iFrame.

I know this is going to seem like a really easy solve but I new to JavaScript so I personally don't know much

Barmar
  • 741,623
  • 53
  • 500
  • 612
Lazer
  • 73
  • 1
  • 1
  • 8
  • 1
    Possible duplicate of [What’s the best way to reload / refresh an iframe?](https://stackoverflow.com/questions/86428/what-s-the-best-way-to-reload-refresh-an-iframe) – denmch Apr 05 '19 at 02:18
  • Is the iframe in the same domain as the main page? – Barmar Apr 05 '19 at 02:42

1 Answers1

1

Try this

function reload() {
    document.getElementById('your_frame_id').src += '?v=' + Math.random();
}

Place this function in your J1.

JkAlombro
  • 1,696
  • 1
  • 16
  • 30
  • I think this will only work if the iframe is in the same domain as the main page. – Barmar Apr 05 '19 at 02:42
  • @Barmar I already edited my answer. That one is 100% working in simple html pages without domain. – JkAlombro Apr 05 '19 at 03:09
  • Thanks, This has taken me way to long and it's finnaly – Lazer Apr 05 '19 at 03:15
  • I think if math.random = the same as the previous value you might get a cached result although it should still refresh. frame.src = frame.src should work the same as this. – Daniel Tate Apr 05 '19 at 03:17
  • @DanielTate yeah that's the downside of that solution but I think there's very small chance that would happen in `Math.random()`. And based on the usage, I don't think the user will spam the reload button. You can always use other random-like algo though as long as you use the cache-busting concept I used on this :) – JkAlombro Apr 05 '19 at 03:21
  • @Lazer mark this as answer if it solved your problem so other visitors would know this is the solution. Thanks :) – JkAlombro Apr 05 '19 at 03:22
  • @DanielTate The chance of getting a repeated random number like this is infinitessimal, and there isn't really a better solution. You'd have to save all the previous cachebusters in local storage, and check against them. If you have a page that's updated frequently and needs to be refreshed, it should probably disable caching with Cache-control headers. – Barmar Apr 05 '19 at 15:55
  • @Barmar There is a better solution literally because of the way the Math.random works in JS. If you want to talk more about this feel free to message me this isn't the place for conversations. – Daniel Tate Apr 09 '19 at 03:00