javascript - Updating an iframe, history and URL. Then making it work with back button -

i'm having problems getting url update when hitting button on browser (i'm on testing on firefox). after updating "src" property of iframe use replacestate update history. if hit button after iframe go previous page url not update reflect this.

function updateurlbar(urlinfo) {     var stateobj = { foo: "bar" };     document.getelementbyid("iframecontent").src = urlinfo[1];     window.history.replacestate(stateobj, "page 2", urlinfo[0]); } 

am going wrong way or missing something. in advanced!

you may find popstate event interesting.

https://developer.mozilla.org/en-us/docs/web/events/popstate

first, change few lines of code have...

function updateurlbar(urlinfo) {     //we can stateobj later...     var stateobj = {          foo: "bar",         url: urlinfo[1]     };      //document.getelementbyid("iframecontent").src = urlinfo[1];      // see edit notes     changeiframesrc(document.getelementbyid("ifamecontent"), urlinfo[1]);      //window.history.replacestate(stateobj, "page 2", urlinfo[0]);     window.history.pushstate(stateobj, "page 2", urlinfo[0]); } 

and can add:

window.onpopstate = function(event) {     //remember our state object?     changeiframesrc( document.getelementbyid("iframecontent") ),event.state.url); // see edit notes. }; 

edit

the iframe caveat

there problem using pushstate , changing iframe src attributes. if iframe in dom, , change src attribute, add state browsers history stack. therefore, if use history.pushstate iframe.src = url, create 2 history entries.

the workaround

changing src attribute of iframe element when iframe not in dom not push browsers history stack.

therefore build new iframe, set it's src attribute, , replace old iframe new one.

var changeiframesrc = function(iframe, src) {     var frame = iframe.clonenode();     frame.src = src;     iframe.parentnode.replacechild(frame, iframe); };