History back for iFrame from Parent Window

you probably will hit an Access Denied error since the URLs in your iframes come with a different domain name.


you probably need to test some URLs with same domain instead

Hi Ryan,

Thank you for your reply but this is not the issue. There is no permission problem involved. History-Back does not influence the actual contants of the external domain but only influence the HREF of the iframe which is controlled by parent page.

Check out this test link: http://www.internet-arts.com/frame_test/ All pages are loaded from same domain, this does not change anything and still the history back for the iframes is not working.

How ever as you pointed out in your post my demo html code was miss-leading because it throughs an permission error but as you can see with same domain does not work either.

You are using

frame1.contentWindow.history.go(-1)

Select allOpen in new window

but "frame1" is only a valid variable in internet explorer (in IE elements with id are created as variables in window Object, i don't know if this still works in newer versions ) .
To ensure compatibility you need to change it to a Element reference:

document.getElementById('frame1').contentWindow.history.go(-1)

Select allOpen in new window

I've changed and tested (Also for frame2 link) and it's working for me.

Result is the same with document.getElementById('frame1').contentWindow.history.go(-1)
I updated the test URL http://www.internet-arts.com/frame_test/ in any browser. As you can see in the initial post I tried this already before.

The links are  working doing "back", but it seems the "history" object is shared between all iframes,
any change on iframe's url are added to a global history in that order

So, calling window.history.go(-1) and calling document.getElementById('frame1').contentWindow.history.go(-1) are equivalent
Also, between different browsers its behavior may be different

Finding out some advices with the topic "multiple iframe history", i've found:
http://khaidoan.wikidot.com/iframe-and-browser-history
http://www.webdeveloper.com/forum/showthread.php?232547-Multiple-Iframes-Back-problem
http://stackoverflow.com/questions/20230226/multiple-iframes-with-individual-back-buttons


Probably, you cannot control the history of individual iframes, unless you are using a different approach (cookies, session data)

See if the new history management in HTML5 can help you controlling the browser history:
https://developer.mozilla.org/en-US/docs/Web/API/History_API

And for backward compatibility you can use the history.js from the Ext-js library
https://github.com/Jackslocum/extjs-history

All options not working really so I thought about another solution and actually keep an array with all URL changes of the iframe and the back button actually changes the SRC of the iframe back to the URL from the own history for this iframe.

How ever now I have another problem. I made a function I call each time the iframe has loaded (onLoad) but I have a problem with the dynamic variable name in this case.

function iframe_update_history(frame){
	
current_iframe_url = document.getElementById(frame).contentWindow.location.href;
  window['current_iframe_active'] = ("history_" + frame);
   window['current_iframe_active'].push(current_iframe_url);         
}

Select allOpen in new window

I call this for example iframe_update_history('frame_one');

The function takes now the current HREF from the frame "frame_one" and I tried to push this into the array called history_iframe_one. How ever I get an error push is not a function because the push function seem to not get the name of my array as I want.

How can I use array push with a dynamic variable in front?

It turns out there is not really good way to do this. If you have several iframes in one page the history back function is a mess in any browser and all the usual functions like history.back() etc. dont work well. Also if you hit the last position of the iframe history the entire parent reloads. I did not find any working solution and that for created my own.

1. On each iframe I use onLOAD to call a function and write the new loaded URL into an array.
2. On my back button I check which iframe is currently active (last touched) and just change the SRC to the last added URL from the array plus delete the last entry array.pop()
3. Once I hit the last entry I just jump and dont do anything.

Works perfect and is pretty simple to do.