Can I force update iframes using JavaScript?

Question

I found a lot of answers on Stack on how to update iframes using JavaScript.

For instance:

• Iframe reload button

• What is the best way to reload / update an iframe using JavaScript?

• How to update IFrame using Javascript?

They work great. However, if the page in the iframe has changed recently, the update will not show this change. Is there a way to force a hard update on the designated iframe to show the new version?

Answer 1

If the iframe same origin , you can force the page to reload using

 iframe.contentWindow.location.reload(true);//The argument "true" will force all loaded resources, such as images, to be re-checked for expiry at the server 

↪ See an example on jsFiddle

↪ More Information on the Mozilla Developer Wiki

---

If you have control over the HTTP headers sent for the page in an iframe , you can also prevent the browser from caching it iframe first .

---

In addition, most web pages completely ignore parameters in the query string for which they do not have a processing code, so you can add a random value or timestamp to the query string so that the browser sees it as a “new” page and do not use a cached copy:

 if(iframe.src.indexOf('timestamp') > -1){ // Check if we still have a timestamp in the URL from a previous refresh iframe.src = iframe.src.replace(/timestamp=[^&]+/, 'timestamp=' + Date.now()); // And if so, replace it instead of appending so the URL doesn't grow too long. }else{ // Else we will append the timestamp iframe.src += (iframe.src.indexOf('?') > -1 ? "&" : "?") + 'timestamp=' + Date.now();// If the URL contains a ?, append &timestamp=...; otherwise, append ?timestamp=... } 

Use new Date().getTime() instead of Date.now() if Date.now() support older browsers .

Answer 2

Reload the iFrame with the url but give it a unique id ...

 var rand = Math.floor((Math.random()*1000000)+1); var iframe = document.getElementById('youriframe'); iframe.src = "http://www.yourpage.com/yourpage.html?uid="+rand; 

It would be easier to give you a solution if we could see the code that you have.

Hope this helps.

Answer 3

I've been struggling with this for ages. Many of the methods mentioned above work if your iframe is in the same domain as your web page.

However, if your iframe is from another domain, these methods do not work (due to the CORS policy).

Changing the type of the src attribute works, but does not cause the iframe to be redrawn correctly. This can be especially obvious if you embed a Google map on a page using an iframe.

In the end, I found that you need:

1) Keep the original iframe attribute

2) Remove iframe from DOM

3) Add a random query parameter to the end of the original attribute that you saved in step 1.

4) Add the iframe back to the DOM (with a unique source attribute).

  //save the source of the iframe minus the unique identifier tempElementSrc = $('#the-iframe').attr('src').substring(0,$('#the-iframe').attr('src').lastIndexOf('&', $('#the-iframe').attr('src'))); //remove the iframe $('#the-iframe').remove(); //readd the iframe with the new source including random query string $('#container-id').append('<iframe width=\"100%\" id=\"iframe-id\" src=\"' + tempElementSrc + '&' + Date.now() + '\">'); 

Answer 4

 Try this code: <script> var iframe = document.getElementById('myframe'); iframe.src = "http://www.w3schools.com?ignore="+Math.floor(Math.random() * 1000); </script>