Load HTML frames in a specific order without problems with back buttons?
I have a web page that uses a frameset.
Due to scripting and object dependencies, I need to load frames in a specific order.
I used this example as a template: JavaScript Source: Navigation: Frame Load Order
This loads a blank page instead of the page I need to load last and then replaces it with the correct page after the first page loads.
However: I also need to use the browser's back button. If you run the sample at the above link, let both frames load and then hit the back button, the top frame returns to a temporary blank page. You must then click the Back button again to navigate to the page before you set the frames.
Is there a way to force the frames to load in a specific order without this back button behavior - or a way to force the back button to skip over a blank page?
This is required to work with Internet Explorer 6 and 7, as well as Firefox 3.
You've mentioned this quite a bit in this post ...
This is an outdated system. A set of frames is required.
If you are working on a legacy system then I think the time has come when you accept the behavior of frames in terms of a browser button. If this is indeed a legacy system, then you do not need to fix this behavior. If this is actually NOT a legacy system and you need to fix this problem, you need to get away from using a frameset. Frames have been deprecated from HTML standards and should not be used.
source to share
Create your own frames with JavaScript:
<html>
<head>
<script>
function makeFrame(frameName) {
var newFrame = document.createElement('frame');
newFrame.id=frameName;
if(frameName=="B") {
newFrame.onload=function() {makeFrame("C")};
newFrame.src = 'http://www.google.com';
}
else {
newFrame.src = 'http://www.yahoo.com';
}
document.getElementById('A').appendChild(newFrame);
}
</script>
</head>
<frameset name='A' id='A' rows="80, *" onload="makeFrame('B')"></frameset>
</html>
source to share
Why not use the three frames in the order you want and then resize / move them to the appropriate places?
<iframe id="a1" src="page-to-load-first.htm"></iframe>
<iframe id="a2" src="page-to-load-second.htm"></iframe>
<iframe id="a3" src="page-to-load-third.htm"></iframe>
<script>
function pos(elem,x,y,w,h) {
if (!elem.style) elem=document.getElementById(elem);
elem.style.position='absolute';
elem.style.top = y+'px';
elem.style.left= x+'px';
elem.style.width=w+'px';
elem.style.height=h+'px';
}
window.onload = function() {
window.onresize=function() {
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
var w3 = w/3;
var h2 = h/2;
pos('a1',0,0,w3,h); /* left 1/3rd */
pos('a2',w3,0,w3+w3,h2);
pos('a3',w3,h2,w3+w3,h2);
};
window.onresize();
};
</script>
source to share