I'm developing an app which uses multiple iframe "mini browsers" inside of a normal Node Webkit window (as described here). The main Node Webkit window is a local HTML file. And the iframe minibrowsers will navigate to external websites.
All was going well until I tried to implement a back button for each of the iframe browsers (each iframe minibrowser needs its own back/forward buttons).
The problem is... when there are no pages left for an iframe browser to go back to, and then the back button for that iframe browser is pressed again, the "back" event breaks out of that iframe, and causes the parent window AND the other iframe browsers to go "back" as well.
This is problematic because the parent window and the iframe browsers need to retain separate styling, etc (some of this styling is changed by the user at runtime). And this styling is lost due to the above mentioned issue.
This is the JS I'm using to make each iframe browser go "back"....
$("#minibrowser1_backButton").mousedown(function(){
document.getElementById('minibrowser1_iframe').contentWindow.history.back();
});
etc. etc.
Is there a better way to accomplish this, so that the back button for each iframe minibrowser NEVER affects the other minibrowsers or parent window, no matter how many times it's pressed?
I found a partial solution to this problem here --> iframe Back with javascript - avoid main page go back
The problem with the above solution though is that it's not reliable, due to the reason explained in that thread.
Is there a better way to do this? Or any other workaround?
Thanks!
