I have a webpage with an IFrame and a Button, once the button is pressed I need the IFrame to be refreshed. Is this possible, if so how? I searched and could not find any answers.
I have a webpage with an IFrame and a Button, once the button is pressed I need the IFrame to be refreshed. Is this possible, if so how? I searched and could not find any answers.
This should help:
document.getElementById('FrameID').contentWindow.location.reload(true);
EDIT: Fixed the object name as per @Joro's comment.
provided the iframe is loaded from the same domain, you can do this, which makes a little more sense:
iframe.contentWindow.location.reload();
Resetting the src attribute directly:
iframe.src = iframe.src;
Resetting the src with a time stamp for cache busting:
iframe.src = iframe.src.split("?")[0] + "?_=" + new Date().getTime();
Clearing the src when query strings option is not possible (Data URI):
var wasSrc = iframe.src
iframe.onload = function() {
iframe.onload = undefined;
iframe.src = wasSrc;
}
2017:
If it in on same domain just :
iframe.contentWindow.location.reload();
will work.
If you use hash paths (like mywebsite.com/#/my/url) which might not refresh frames on switching hash:
<script>
window.onhashchange = function () {
window.setTimeout(function () {
let frame = document.getElementById('myFrame');
if (frame !== null) {frame.replaceWith(frame);}
}, 1000);
}
</script>
Unfortunately, if you don't use the timeout JS may try to replace the frame before the page has finished loading the content (thus loading the old content). I'm not sure of the workaround yet.
Here is the HTML snippet:
<td><iframe name="idFrame" id="idFrame" src="chat.txt" width="468" height="300"></iframe></td>
And my Javascript code:
window.onload = function(){
setInterval(function(){
parent.frames['idFrame'].location.href = "chat.txt";
},1000);}