C
CAQ
I've created several html pages, one is a frame page, two are sub
pages. Here's the sources:
main.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
var currentUrl = location.href;
var i = currentUrl.indexOf("#");
if (i <= 0) {
document.getElementById("frm").src = "sub1.html";
} else {
document.getElementById("frm").src = currentUrl.substring(i + 1);
}
});
EventUtil.addEventHandler(window, "unload", function()
{alert("hello");});
</script>
</head>
<body>
<a href="sub1.html" target="frm">link1</a>
<a href="sub2.html" target="frm">link2</a>
<iframe name="frm" id="frm" />
</body>
</html>
sub1.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
loadIFrame(1);
});
</script>
</head>
<body>
This is sub page 1.
</body>
</html>
sub2.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
loadIFrame(2);
});
</script>
</head>
<body>
This is sub page 2.
</body>
</html>
The js files:
url.js:
<!--
function loadIFrame(id) {
if (top.location == self.location) {
location.href = "main.html#sub" + id + ".html";
return;
}
var sh = parent.location.href.indexOf("#");
if (sh < 0) {
parent.location.href = "main.html#sub1.html";
return;
}
parent.location.href = parent.location.href.slice(0, sh) + "#sub" +
id + ".html";
}
-->
util.js:
<!--
var EventUtil = new Object();
EventUtil.addEventHandler = function(target, eventType, handler) {
if (target.addEventListener) { // for DOM-comliant browsers
target.addEventListener(eventType, handler, false);
} else if (target.attachEvent) { // for IE
target.attachEvent("on" + eventType, handler);
} else { // for all others
target["on" + eventType] = handler;
}
};
-->
In this way, my frame will support refresh, back and static link for a
specific sub page.
But it's strange that in Firefox (3.0), the sub page doesn't change
when I click "Back" or "Forward". The url changes (main.html#sub1.html
or main.html#sub2.html), but the page in the IFrame doesn't change at
all. I have to click "Refresh", and it works.
However, the pages go well in IE, that is, I don't have to click
"Refresh".
Does anyone know the reason to this strange problem? I think there
should be some methods to solve it, because in GMail or Google Docs,
"Back" acts very well when there's only a "#" difference in the change
of URL.
Thanks a lot!
pages. Here's the sources:
main.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
var currentUrl = location.href;
var i = currentUrl.indexOf("#");
if (i <= 0) {
document.getElementById("frm").src = "sub1.html";
} else {
document.getElementById("frm").src = currentUrl.substring(i + 1);
}
});
EventUtil.addEventHandler(window, "unload", function()
{alert("hello");});
</script>
</head>
<body>
<a href="sub1.html" target="frm">link1</a>
<a href="sub2.html" target="frm">link2</a>
<iframe name="frm" id="frm" />
</body>
</html>
sub1.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
loadIFrame(1);
});
</script>
</head>
<body>
This is sub page 1.
</body>
</html>
sub2.html:
<html>
<head>
<script src="url.js" type="text/javascript"></script>
<script src="util.js" type="text/javascript"></script>
<script type="text/javascript">
EventUtil.addEventHandler(window, "load", function() {
loadIFrame(2);
});
</script>
</head>
<body>
This is sub page 2.
</body>
</html>
The js files:
url.js:
<!--
function loadIFrame(id) {
if (top.location == self.location) {
location.href = "main.html#sub" + id + ".html";
return;
}
var sh = parent.location.href.indexOf("#");
if (sh < 0) {
parent.location.href = "main.html#sub1.html";
return;
}
parent.location.href = parent.location.href.slice(0, sh) + "#sub" +
id + ".html";
}
-->
util.js:
<!--
var EventUtil = new Object();
EventUtil.addEventHandler = function(target, eventType, handler) {
if (target.addEventListener) { // for DOM-comliant browsers
target.addEventListener(eventType, handler, false);
} else if (target.attachEvent) { // for IE
target.attachEvent("on" + eventType, handler);
} else { // for all others
target["on" + eventType] = handler;
}
};
-->
In this way, my frame will support refresh, back and static link for a
specific sub page.
But it's strange that in Firefox (3.0), the sub page doesn't change
when I click "Back" or "Forward". The url changes (main.html#sub1.html
or main.html#sub2.html), but the page in the IFrame doesn't change at
all. I have to click "Refresh", and it works.
However, the pages go well in IE, that is, I don't have to click
"Refresh".
Does anyone know the reason to this strange problem? I think there
should be some methods to solve it, because in GMail or Google Docs,
"Back" acts very well when there's only a "#" difference in the change
of URL.
Thanks a lot!