How to refresh an IFrame using Javascript?
JavascriptIframeJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
Solution 2 - Javascript
This should help:
document.getElementById('FrameID').contentWindow.location.reload(true);
EDIT: Fixed the object name as per @Joro's comment.
Solution 3 - Javascript
provided the iframe is loaded from the same domain, you can do this, which makes a little more sense:
iframe.contentWindow.location.reload();
Solution 4 - Javascript
Works for IE, Mozzila, Chrome
document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
Solution 5 - Javascript
You can use this simple method
function reloadFrame(iFrame) {
iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);
}
Solution 6 - Javascript
Got this from here
var f = document.getElementById('iframe1');
f.src = f.src;
Solution 7 - Javascript
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;
}
Solution 8 - Javascript
2017:
If it in on same domain just :
iframe.contentWindow.location.reload();
will work.
Solution 9 - Javascript
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.
Solution 10 - Javascript
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);}
Solution 11 - Javascript
If you have Multiple iFrames inside the page, then this script might be useful. I am asuming there is a specific value in the iFrame source which can be used to find the specific iFrame.
var iframes = document.getElementsByTagName('iframe');
var yourIframe = null
for(var i=0; i < iframes.length ;i++){
var source = iframes[i].attributes.src.nodeValue;
if(source.indexOf('/yourSorce') > -1){
yourIframe = iframes[i];
}
}
var iSource = yourIframe.attributes.src.nodeValue;
yourIframe.src = iSource;
Replace "/yourSource" with value you need.
Solution 12 - Javascript
If your iframe's URL does not change, you can just recreate it.
If your iframe is not from the same origin (protocol scheme, hostname and port), you will not be able to know the current URL in the iframe, so you will need a script in the iframe document to exchange messages with its parent window (the page's window).
In the iframe document:
window.addEventListener('change', function(e) {
if (e.data === 'Please reload yourself') {
var skipCache = true; // true === Shift+F5
window.location.reload(skipCache);
}
}
In your page:
var iframe = document.getElementById('my-iframe');
var targetOrigin = iframe.src; // Use '*' if you don't care
iframe.postMessage('Please reload yourself', targetOrigin);
Solution 13 - Javascript
You can use this:
Js:
function refreshFrame(){
$('#myFrame').attr('src', "http://blablab.com?v=");
}
Html:
`<iframe id="myFrame" src=""></iframe>`
JS Fiddle : https://jsfiddle.net/wpb20vzx/