Reload an IFRAME without adding to the history

问题:

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?

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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);

回答5:

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

回答6:

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.

回答7:

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.

回答8:

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')
}