77

I'm changing an IFRAME's src in order to reload it, its working fine and firing the onload event when its HTML loads.

But it adds an entry to the history, which I don't want. Is there any way to reload an IFRAME and yet not affect the history?

2
  • 7
    I'm guessing the problem is the back button will actually cycle through the iframe before actually going to the previous page. May 4, 2009 at 18:47
  • 3
    Whatever it does, I don't want any additions to the history, or is there a way I can delete the latest history entry?? May 4, 2009 at 18:50

11 Answers 11

80

Using replace() is only an option with your own domain iframes. It fails to work on remote sites (eg: a twitter button) and requires some browser-specific knowledge to reliably access the child window.

Instead, just remove the iframe element and construct a new one in the same spot. History items are only created when you modify the src attribute after it is in the DOM, so make sure to set it before the append.

Edit: JDandChips rightly mentions that you can remove from DOM, modifiy, and re-append. Constructing fresh is not required.

5
  • 6
    While this answer is 2 years newer than the accepted answer, it is the correct way to change an iframe URL/src without adding to the browser's history. Any other combination of window.frames[frameName].location and/or history.replaceState won't work in an iframe for security reasons. Even on the same domain (as I just found out). Jan 17, 2012 at 1:41
  • This is the best working answer I have tried. Solved my problem.
    – pawelglow
    Feb 2, 2013 at 20:44
  • The solution was this one! I needed to create the iframe so the history remains intact.
    – roq
    Apr 19, 2013 at 19:15
  • Great answer. I was trying to add vimeo embeded video with iframe and angular, something like this: <div ng-repeat="item in ct.items"><iframe src="{{item.url}}"></iframe></div>. It happens that before the angular sets the iframe url, the html tried to load the iframe with the wrong url like {{item.url}}, the result is that the iframe had it's src changed, causing the browser history problem! The solution was creating the iframe later, with jquery, after angular rendered everything. May 21, 2018 at 22:45
  • Does this issue also occur if the url is changed from inside the iframe itself (like if the user clicks or J.S. redirects to a 2nd page inside the iframe)? I dont change the iframe src directly via DOM. Ex: I have an AdobeEsign page embedded in an iframe in my SPA, that redirects to a Thank You page in the same iframe (then the Thank You page send a windows.postmessage back to my main frame so I can close the iframe)... but clicking the Browser back button in my SPA at this point seems like its wanting to 'leave the page' (my window.beforeunload event fires as the user is leaving the SPA). Jun 26, 2019 at 18:54
39

You can use javascript location.replace:

window.location.replace('...html');

Replace the current document with the one at the provided URL. The difference from the assign() method is that after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.

8
  • 3
    Would'nt this target the page itself? I only want to reload the IFRAME and I've no control over the scripts running inside the loaded document. May 4, 2009 at 18:51
  • 7
    Just replace "window" with a reference to your iframe.
    – Ishmael
    May 4, 2009 at 18:52
  • 3
    Why is it not that simple? var ifr = document.getElementById("iframeId"); ifr.location.replace(ifr.src); May 4, 2009 at 21:18
  • 2
    Try using window.frames['frame_name'].location
    – ChrisD
    Feb 14, 2011 at 19:44
  • 20
    You can also use iframe.contentWindow.location.replace(href);
    – Kyle
    Jan 30, 2014 at 23:19
26

Like Greg said above, the .replace() function is how to do this. I can't seem to figure out how to reply to his answer*, but the trick is to reference the iFrames contentWindow property.

var ifr = document.getElementById("iframeId");
ifr.contentWindow.location.replace("newLocation.html"); 

*Just learned I need more reputation to comment on an answer.

15

An alternative method to recreating the iframe would be to remove the iframe from the DOM, change the src and then re add it.

In many ways this is similar to the replace() suggestion, but I had some issues when I tried that approach with History.js and managing states manually.

var container = iframe.parent();

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);
2
  • I really like this: it turned out to be way easier than creating a new iframe because you don't need to copy over all the properties to the new iframe (id, size, style classes, ...)
    – Legolas
    May 26, 2015 at 11:27
  • Great find. This solution worked for me in the case of loading iframe content in a Bootstrap modal window. When the modal is closed, use the callback to remove it, and add it back. Fixes the back button issue. $(modal).one('hidden.bs.modal', function() { $(modal_iframe).attr('src', 'about:blank').addClass('d-none'); var modalParent = $(modal_iframe).parent(); $(modal_iframe).remove(); $(modalParent).append($(modal_iframe)); });
    – drew010
    Mar 26, 2021 at 17:12
10

One solution is to use the object tag rather than the iframe tag.

Replacing this:

<iframe src="http://yourpage"/>

By this:

<object type="text/html" data="http://yourpage"/>

will allow you to update the data attribute without affecting the history. This is useful if you use a declarative framework such as React.js where you are not supposed to do any imperative command to update the DOM.

More details on differences between iframe and object: Use of Iframe or Object tag to embed web pages in another

2
  • Agreed great answer @JBE this helped me immensely with Angular2 and not having the iframe src changes trigger history updates.
    – N.Schipper
    Oct 27, 2016 at 11:35
  • This doesn't work for me. I'm in Chrome. Even destroying the iframe and replacing it with an object still causes the darn browser history state (which makes no sense because the destroyed object will never get it's content back). Grrrrrrrrr.
    – trusktr
    Jan 10, 2018 at 5:54
5

Try to use this function to replace old iframe with new iframe which is copied from old one:

function setIFrameSrc(idFrame, url) {
    var originalFrame = document.getElementById(idFrame);
    var newFrame = document.createElement("iframe");
    newFrame.id = originalFrame.getAttribute("id");
    newFrame.width = originalFrame.getAttribute("width");
    newFrame.height = originalFrame.getAttribute("height");
    newFrame.src = url;    
    var parent = originalFrame.parentNode;
    parent.replaceChild(newFrame, originalFrame);
}

Use it like this:

setIFrameSrc("idframe", "test.html");

This way will not add URL of iframe to browser history.

0
1

Use the replace method to bypass the addition of the iframe's URL to history:

HTML:

<iframe id="myIframe" width="100%" height="400" src="#"></iframe>

JavaScript:

var ifr = document.getElementById('mIframe')
if (ifr) {
  ifr.contentWindow.location.replace('http://www.blabla.com')
}
1
  • What is the string/URL sent to replace?
    – 2540625
    Nov 13, 2022 at 21:01
1

JDandChips answer worked for me on a cross origin iframe (youtube), here it is in vanilla JS (without JQuery):

const container = iframe.parentElement;

container.removeChild(iframe);

iframe.setAttribute('src', 'about:blank');

container.appendChild(iframe);
0

The most simple and fast loading solution
Use window.location.replace to not update the history when loading the page or the frame.

For links it looks like this:

<a href="#" onclick="YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>

or

<a href="javascript:YourTarget.location.replace ('http://www.YourPage.com');">
The targeted Link</a>



But if you want it not to act from link but to act automatically when loading the frame then from the iframe you should put this in the iframe file body section:

onload="window.location.replace ('http://www.YourPage.com');"


If for some reason the onload does not load in the iframe then put your target frame name instead of window in the syntax like this:

onload="YourTarget.location.replace ('http://www.YourPage.com');"



NOTE: For this script all onclick, onmouseover, onmouseout , onload and href="javascript:" will work.

0

@JDandChips has a great answer above, but the syntax should be updated from parent() to parentElement:

var container = iframe.parentElement;

iframe.remove();
iframe.attr('src', 'about:blank');

container.append(iframe);
1
  • Welcome to StackOverflow! If an answer is largely correct and only really needs minor updates, you should suggest an edit to the answer rather than posting a new one yourself. It'll get you a badge if your suggestion gets accepted :)
    – Das_Geek
    Oct 29, 2019 at 16:32
0

There is also a nice solutions by setting the key attribute of the iframe to prevent the iframe from adding to the history.

Especially if working with frameworks like...

react

<iframe key={contentId} src={`embedded/content/${contentId}`} />

vue

<iframe :key="contentId" :src="src" />

A very detailed explentation can be found here:

https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.