Reload an iframe externally

You can use this snippet if you want to give users the option to reload the content in an iframe.

let iframe = document.querySelector("iframe");
let reloadButton = document.querySelector(".btnReload");

reloadButton.addEventListener("click", () => {
  iframe.src += "";
});

One restriction to this approach is that it does not work if the URL used in the src attribute has a text fragment e.g. <iframe src="https://www.roboleary/demos/68sXqkhm/#text-fragment"></iframe>.

Demo

For example, you have a demo embed and you want to allow users to rerun the demo. In the example below, the iframe is showing an animation, and you can click the “reload” button to restart the animation.

Solution

Making a change to the src attribute triggers a reload of the iframe. In this case, we are essentially resetting the same value for src.