How to preserve scroll position after web page reload
A Rowell
having it scroll back to the top.
With the script I'm trying to use:
Linux/Mozilla 5: The scroll problem does not exist.
Linux/Netscape 4, 6: The script works.
Win 2K: The script does not work in IE 5, 6 or Netscape 4.
If I hardcode something like scrollTo(400, 400) I can see it scroll
down and then back up as the reload finishes.
The current script follows:
<head>
<script language="JavaScript">
function doLoad()
{
setTimeout( "refresh()", 10*1000 );
}
function refresh()
{
if(navigator.appName == "Netscape")
{
X = window.pageXOffset;
Y = window.pageYOffset;
}
else
{
X = document.body.scrollLeft;
Y = document.body.scrollTop;
}
window.location.reload();
window.scrollTo(X, Y);
return;
}
</script>
</head>
<body onload="doLoad()">
Thanks.
A Rowell
It's been pointed out to me that IE automatically preserves the scroll
position on reload. So I should probably add that I'm genertaing the
HTML that contains the script using a JSP on Tomcat/Apache. The JSP
loads an XSL stylesheet and an XML doc and applies the former to the
latter. This may be why the problem occurs in the first place. If
anyone has a better way to do this or knows why it's happening I would
appreciate them sharing it.
I apologize if I'm not using the right group or etiquette or whatever.
I'm new to this.
~~A
Richard Cornford
<91b0ee41.02091...@posting.google.com>...
>alro...@fedex.com (A Rowell) wrote in message
news:<91b0ee41.0209...@posting.google.com>...
>> I'm trying to use JavaScript to reload the current web page without
>> having it scroll back to the top.
>>
>> With the script I'm trying to use:
>> Linux/Mozilla 5: The scroll problem does not exist.
>> Linux/Netscape 4, 6: The script works.
>> Win 2K: The script does not work in IE 5, 6 or Netscape 4.
>> If I hardcode something like scrollTo(400, 400) I can see it scroll
>> down and then back up as the reload finishes.
>It's been pointed out to me that IE automatically preserves the scroll
>position on reload. So I should probably add that I'm genertaing the
>HTML that contains the script using a JSP on Tomcat/Apache. The JSP
>loads an XSL stylesheet and an XML doc and applies the former to the
>latter. This may be why the problem occurs in the first place. If
>anyone has a better way to do this or knows why it's happening I would
>appreciate them sharing it.
The problem that you are having is that you are trying to get a script
executed on the last page to influence the scroll position of the next
page that is loaded. I think that you can consider yourself lucky that
this ever works. It is not a strategy that will ever pay of everywhere,
I can see many browsers using the call to 'reload' as an excuse to stop
executing scripts in the current page entirely.
The solution is to exploit the request/response relationship that you
are familiar with from JSP and send the current scroll position of the
page as a URL search string so that when the response arrives back at
the browser from the JSP an onLoad handler can read the search string
and extract the scroll positions of the last page an pre-scroll the
current page to that position. The 'reload' command will use the
original URL, so, instead you would have to use document.location.href
or document.location.replace. In terms of the effect these two commands
have on the history object 'replace' is most like 'reload' so I have
used that in the following example.
It is worth mentioning that scrollTo does not work properly on IE 4 and
Opera 6 so I have used alternatives that should work (leaving scrollTo
for browsers that only provide that option, though I don't know of any)
The following example HTML preserves the scrolling position of the page
by adding the values to the URL search string and then uses onLoad to
set the position of the new page. I have tested it with Netscape 4.7 &
7.0, Opera 6, Mozilla 1 and IE 4 (all windows 98) and I would be very
surprised if it did not work with IE 5+ as well.
Richard.
<html>
<head>
<title>Search String Test</title>
<script language="JavaScript" type="text/JavaScript">
function getNumberVar(st){
var res = parseInt(getStringVar(st));
return ((isNaN(res))?0:res)
}
function getStringVar(st){
var temp = self.document.location.href;
if(temp.indexOf(st) >= 0){
temp =
temp.substring((temp.indexOf(st)+
(st.length+1)), temp.length);
temp =
temp.substring(0, (((temp.indexOf('&') >= 0)?
temp.indexOf('&'):temp.length)));
}else{
temp = '';
}
return unescape(temp);
}
function reloader(){
var X, Y;
if(typeof window.pageXOffset != 'undefined'){
X = window.pageXOffset;
Y = window.pageYOffset;
}else{
if((!window.document.compatMode)||
(window.document.compatMode == 'BackCompat')){
X = window.document.body.scrollLeft;
Y = window.document.body.scrollTop;
}else{
X =
window.document.documentElement.scrollLeft;
Y =
window.document.documentElement.scrollTop;
}
}
var temp = self.location.href;
var indX = temp.indexOf('xScroll');
if(indX > 0){
temp = temp.substring(0, (indX-1))+
((temp.indexOf('&', (indX+7)) >= 0)?
temp.substring(temp.indexOf('&',(indX+7)), temp.length):'');
}
var indY = temp.indexOf('yScroll');
if(indY > 0){
temp = temp.substring(0, (indY-1))+
((temp.indexOf('&', (indY+7)) >= 0)?
temp.substring(temp.indexOf('&',(indY+7)), temp.length):'');
}
window.document.location.replace((temp+
((temp.indexOf('?') > 0)?'&':'?')+
'xScroll='+X+'&yScroll='+Y));
}
function setScroll(){
var X, Y;
X = getNumberVar('xScroll');
Y = getNumberVar('yScroll');
if((X > 0)||(Y > 0)){
if((top.opera)&&(typeof window.pageYOffset != 'undefined')){
window.pageYOffset = Y;
window.pageXOffset = X;
}else if((window.document.compatMode)&&
(window.document.compatMode != 'BackCompat')){
window.document.documentElement.scrollLeft = X;
window.document.documentElement.scrollTop = Y;
}else if((window.document.body)&&
(typeof window.document.body.scrollTop != 'undefined')){
window.document.body.scrollLeft = X;
window.document.body.scrollTop = Y;
}else{
window.scrollTo(X, Y);
}
}
}
</script>
</head>
<body onload="setScroll();">
<form name="A">
<br><input type="button" value="reload" onclick="reloader();">
<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10
<br><input type="button" value="reload" onclick="reloader();">
<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20
<br><input type="button" value="reload" onclick="reloader();">
<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30
<br><input type="button" value="reload" onclick="reloader();">
<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>40
<br><input type="button" value="reload" onclick="reloader();">
<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50
<br><input type="button" value="reload" onclick="reloader();">
<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>60
<br><input type="button" value="reload" onclick="reloader();">
<br>61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>70
<br><input type="button" value="reload" onclick="reloader();">
<br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>80
<br><input type="button" value="reload" onclick="reloader();">
<br>81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>90
<br><input type="button" value="reload" onclick="reloader();">
<br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>100
</form>
</body>
</html>
A Rowell
> The problem that you are having is that you are trying to get a script
> executed on the last page to influence the scroll position of the next
> page that is loaded. I think that you can consider yourself lucky that
> this ever works. It is not a strategy that will ever pay of everywhere,
> I can see many browsers using the call to 'reload' as an excuse to stop
> executing scripts in the current page entirely.
>
~~A