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.
13 Answers
var iframe = document.getElementById('youriframe');
iframe.src = iframe.src;
-
2It works for me in this version of Chrome:
Version 24.0.1312.56 Ubuntu 12.04 (24.0.1312.56-0ubuntu0.12.04.1)
Commented Mar 13, 2013 at 17:13 -
3FYI - There is currently (as of January 2013) a Chromium project bug (code.google.com/p/chromium/issues/detail?id=172859) which causes iframe updates to add to document history. Commented Apr 10, 2013 at 16:58
-
If into iFrame change the page, this method lost the navigation Commented Jun 26, 2013 at 12:15
-
14
var tmp_src = iframe.src; iframe.src = ''; iframe.src = tmp_src;
– LyfingCommented Jan 27, 2015 at 8:28 -
2this perfectly work for me in chrome
document.getElementById('frame_id').contentDocument.location.reload(true);
– hcbCommented Jul 13, 2016 at 9:01
This should help:
document.getElementById('FrameID').contentWindow.location.reload(true);
EDIT: Fixed the object name as per @Joro's comment.
-
3This is not working in IE9. You should use contentWindow instead contentDocument.– gotqnCommented Aug 9, 2012 at 11:24
-
1Thanks for the answer. Additionally, If you must positively cause a refresh to another page to another within the iframe then instead of
reload(true)
you would use this:document.getElementById('FrameID').contentWindow.location.replace(new_url);
– racl101Commented Aug 19, 2014 at 21:54 -
23This does not work with iframes with different origins (protocol, hostname or port).– michelpmCommented Jul 24, 2015 at 1:58
provided the iframe is loaded from the same domain, you can do this, which makes a little more sense:
iframe.contentWindow.location.reload();
Works for IE, Mozzila, Chrome
document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
You can use this simple method
function reloadFrame(iFrame) {
iFrame.parentNode.replaceChild(iFrame.cloneNode(), iFrame);
}
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.
Got this from here
var f = document.getElementById('iframe1');
f.src = f.src;
-
If into iFrame change the page, this method lost the navigation Commented Jun 26, 2013 at 12:16
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);}
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.
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);
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/
-
1The question has nothing to do with the popular JavaScript library called jQuery. Commented May 19, 2015 at 7:59
-
What would Math.round() do? It looks totally useless here. Commented Jun 11, 2015 at 10:44
-
Hi I used Math.round() Because Some Browser can cache Url - page so refresh not working. Commented Jun 12, 2015 at 7:59