Webmaster
JavaScript : Dynamic Window Handling: E-Commerce Example
[ Contents ]
Dr Benton
Opening and Closing Windows
The child windows (for the basket and the total due) are created when the main page loads. For this purpose we use the onLoad event of the <BODY> tag. Change the code of the main page as follows:
<BODY ONLOAD="ouvre_fenetres('white','white',200,300,200,300);">
The button to empty the basket will be used to close the windows. Change the corresponding code as follows:
<FORM>
<INPUT TYPE="button" value="Empty basket" onClick="ferme_fenetres();">
</FORM>
The function ouvre_fenetres is responsible for opening of the two child windows, and the function ferme_fenetres will close them.
The opening function expects six parameters: the first two define the background colours for the two child windows (you can use symbolic constants as we do here or the hexadecimal code of the colours: #RRGGBB), and the four others are for the window widths and heights.
Place the opening and closing script tags in the page head. They will enclose all the functions which our page references.
<HEAD>
<SCRIPT>
All our functions are added here.
</SCRIPT>
</HEAD>
Now add the functions ouvre_fenetres and ferme_fenetres:
function ouvre_fenetres(coul1,coul2,larg1,haut1,larg2,haut2)
{
caddie = window.open('','caddie','width='+larg1+',height='+haut1+',screenX=200,screenY=100,top=100,left=200');
caisse = window.open('','caisse','width='+larg2+',height='+haut2+',screenX=450,screenY=100,top=100,left=450');
caddie.document.write('<head><title>Your basket</title></head><body bgcolor='+coul1+'><CENTER><B>Your basket</B></CENTER><BR></BODY>');
caisse.document.write('<title>Total due</title><body bgcolor='+coul2+'><form NAME="formu">Total: <input type="TEXT" NAME="total" VALUE="00" SIZE="4"> £</FORM></BODY>');
}
function ferme_fenetres()
{
caddie.close();
caisse.close();
}
If you have already visited our introductory workshop on window handling, you should not have any difficulties with the above.
Note that each of the child windows are assigned a name (caddie and caisse) when they are opened, which is also used in the function ferme_fenetres to close the windows.
Our pages are successively filled with the write method, the cornerstone of this workshop. Its syntax is really simple:
object.document.write('HTML code')
You can write as much HTML code as you like in the window identified by object. All character string handling operations are permitted.