daryl croke
research diary
edim 2002
week 3.
More on page reloading
In the previous week it a javascript function was added to the page to detect the window name and reload the page from the server.
Tests window name
<script language="javascript1.2">
function pageNew(){
var myWin=window.name;
if(myWin=='refreshpage')
{
//rename page
window.name="bret";
var myWin=window.name;
location.reload();
}
}
</script></head>
Call testing function
<body onLoad="pageNew()">
http://edim.tafe.vu.edu.au/cfprojects/darylcroke/cf-assignment/home/test1.cfm
A further refinement was developed where styles could be dynamically selected
without using an external variable retrieved from a coldfusion database.
Step one was to name the window property every time the user selects a
different style.
<a href="javascript:;" onClick="window.name='medium'">medium</a>
Step two was to reload the page when the link was clicked.
<a href="javascript:;" onClick="window.name='medium'; location.reload()">medium</a>
On reloading a javascript function detected the name of the window a loads
the correct style sheet.
<script type="text/javascript">
var styleChoice=window.name;
if(styleChoice=='small') {
document.writeln
("<LINK type='text/css' rel='stylesheet' href='../styles/small.css'>")
}
else if(styleChoice=='medium') {
document.writeln
("<LINK type='text/css' rel='stylesheet' href='../styles/medium.css'>")
}
else if(styleChoice=='large') {
document.writeln
("<LINK type='text/css' rel='stylesheet' href='../styles/large.css'>")
}
else{
document.writeln
("<LINK type='text/css' rel='stylesheet' href='../styles/medium.css'>")
};
</script>
The advantage of this method is that pages can be dynamically loaded without using a coldfussion database or "cookies". Another advantage is that it is extremely fast.
This method worked well using Internet Explorer 5.0 on a Mac
http://edim.tafe.vu.edu.au/cfprojects/darylcroke/cf-assignment/home/test2.htm
Another method of forcibly reload a page from the serve was developed by
my web design lecturer Greg Giannis.
This method uses a CGI query string to load the changing page. That string
is retrieved and a time stamp is added. Each page has therefore been given
a unique status. A command retrieves the previous URL and sends the user
back to that URL. Because the URL is slightly different the browsers is
forced to load the page from the server not the cache.
Selecting style calls a javascript function "f1" and passes a
variable "medium".
The f1 function constructs a URL string and goes to the appropriate page.
<!-- var loc=location.href;
function f1(num) {
window.location.href='../change/'+ num + '.cfm?' + loc ;
}
//-->
</script>
window.location.href='../change/'+ num + '.cfm?' + loc ;
window.location.href='../change/'+ medium1 + '.cfm?' + loc ;
window.location.href='../change/medium1.cfm?' + test2.htm;
The script in the changing page.
<script language="JavaScript">
<!--
var thisPage=location.href;
var pos=thisPage.indexOf('?') ;
var prevPage=thisPage.substring(pos+1);
location.href=prevPage + '?' + (new Date()).getTime() ;
//-->
</script>
This page worked well on Internet Explorer on a Macintosh.
http://edim.tafe.vu.edu.au/cfprojects/darylcroke/cf-assignment/home/test3.cfm