Entry
How do I scroll to an anchor in a dynamically written document in NN4 and NN6?
Dec 23rd, 2001 05:24
Martin Honnen,
Usually if a document contains an html anchor e.g.
<a name="anchorName">content</a>
the browser scrolls to that anchor when you load a link with a anchor
reference
<a href="#anchorName">jump to anchor</a>
or use JavaScript to set
location.hash = 'anchorName';
This also works across windows/frames by using the target attribute in
the link
<a href="#anchorName" target="windowOrFrameName">
or by scripting the location of a window or frame object e.g.
winReference.location.hash = 'anchorName'
However if a document is completely created with JavaScript by using
winReference.document.open();
winReference.document.write('html goes here');
winReference.document.close()
then NN4 and NN6 are too stupid to figure out how to use a link to an
anchor. They assume the anchor being relative to the base url of the
creating document and then don't scroll the dynamically generated
document to the anchor but load the base url document.
The following page is an example frameset where both frames are
document.written completely, the first frame containing several
anchors and the second trying to link to those. For NN4 and NN6 a
function checkScrollNecessary is provided in the frameset which is
called in the onclick handler of a link to an anchor and then for NN4
and NN6 determines the position of the anchor in the other frame and
scrolls the frame with JavaScript to the intended position.
I have also checked IE6 and it is clever enough to
correctly link to the anchor.
<html>
<head>
<title>
jumping to anchors in dynamically created documents
</title>
<script type="text/javascript">
function getAnchorPosition (frameName, anchorName) {
if (document.layers) {
var anchor = frames[frameName].document.anchors[anchorName];
return { x: anchor.x, y: anchor.y };
}
else if (document.getElementById) {
var anchor = frames[frameName].document.anchors[anchorName];
var coords = {x: 0, y: 0 };
while (anchor) {
coords.x += anchor.offsetLeft;
coords.y += anchor.offsetTop;
anchor = anchor.offsetParent;
}
return coords;
}
}
function checkScrollNecessary (link) {
if (document.layers) {
var coords = getAnchorPosition(link.target,
link.hash.substring(1));
parent.frames[link.target].scrollTo(coords.x , coords.y);
return false;
}
else if (!document.all && document.getElementById) {
var coords = getAnchorPosition(link.target,
link.hash.substring(1));
parent.frames[link.target].scrollTo(coords.x , coords.y);
return false;
}
else
return true;
}
function createFrames () {
var html = '';
html += '<html><body>';
for (var i = 0; i < 10; i++) {
html += '<a name="anchor' + i + '">anchor ' + i + '<\/a><br \/>';
for (var r = 0; r < 10; r++)
html += 'Kibology ' + i + r + '<br \/>';
}
html += '<\/body><\/html>';
frame0.document.open();
frame0.document.write(html);
frame0.document.close();
html = '';
html += '<html><body>';
for (var i = 0; i < 10; i++) {
html += '<a href="#anchor' + i + '" target="frame0" ';
html +=
'onclick="return parent.checkScrollNecessary(this)">anchor ' + i
+ '<\/a> | ';
}
html += '<\/body><\/html>';
frame1.document.open();
frame1.document.write(html);
frame1.document.close();
}
</script>
</head>
<frameset rows="50%, *" onload="createFrames();">
<frame name="frame0" src="about:blank" />
<frame name="frame1" src="about:blank" />
</frameset>
</html>
