History back for iFrame from Parent Window

Hi experts,

I do have a page with 6 different iframes and would like to control from the parent window the history back function of each iframe separated. Lets say I have 2 iframes with the same URL inside, in one of the iframes the user clicks deeper for a couple of levels. And now I have inside my original parent a BACK button which ONLY influence the iframe the user want to go back but not for the others or even worse for the parent.

I made an example code to explain better

This is a simple test
<a href="#" onClick="document.getElementById('1').contentWindow.history.back(-1);">FRAME 1 BACK</a>&nbsp;&nbsp;&nbsp;<a href="#" onClick="document.getElementById('2').contentWindow.history.back(-1);">FRAME 2 BACK</a>
iFrame 1<br><iframe id="1" name="1" src="http://www.bing.com" style="width: 90%; height: 300px"></iframe><br><br>
iFrame 2<br><iframe id="2" name="2" src="http://www.bing.com" style="width: 90%; height: 300px"></iframe><br><br>

Open in new window

Of course this is just a fast test code and not correct HTML, I tried just to show the problem for me.
Right now I can click on any of the history back buttons without anything happens.

Anybody with an idea? (can be also jquery)

Thank you
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Javascript error
you probably need to test some URLs with same domain instead
Oliver2000Author Commented:
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.
F IgorDeveloperCommented:
You are using


Open 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:


Open in new window

I've changed and tested (Also for frame2 link) and it's working for me.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Oliver2000Author Commented:
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.
F IgorDeveloperCommented:
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:

Probably, you cannot control the history of individual iframes, unless you are using a different approach (cookies, session data)
F IgorDeveloperCommented:
See if the new history management in HTML5 can help you controlling the browser history:

And for backward compatibility you can use the history.js from the Ext-js library
Oliver2000Author Commented:
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);

Open 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?
Oliver2000Author Commented:
I have solved the last problem already with a different approach. Unless somebody else has a simpler solution for the iframe history problem I work with a log file in a separated array for each iframe and use this to jump back.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Oliver2000Author Commented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.