Working with Browser Windows
o Using standard HTML links, we can open new browser windows:
<a href=”#” target=”_new”>link</a>
o The amount of control this method affords us over the resultant image, however, is nil. We cannot control the size, shape, location on the screen or anything else about that window with this method.
o JavaScript allows us much finer control, as we may expect:
window.open( page_url, name, parameters );
o As we can see from the above prototype, there are only three arguments that this method can take. However, the parameters argument is actually more complex than we might assume:
”param1,param2,param3,param4…”
since we can use it to add many parameters to the method. Note there are no spaces in the parameter list.
o name is used to give the window an HTML name – so we can use that name to open links into the new window using the “target” method above.
o The return value from the open method is an object variable referring to the newly opened window. In other words, if we open a new window like so:
win = window.open(“page.html”, “”, “”);
we can use the object variable win to alter the new window through JavaScript.
o A practical example – let’s say we want to open a new window 300 pixels high by 400 pixels wide, and display the BBC news page in it. The following code would suffice:
window.open(“http://news.bbc.co.uk/”,“bbc”, “width=300,height=300”);
o Some available parameters are given in the table below:
| Parameter | Value | Function |
| location | Yes/No | Specifies whether or not the location (address) bar is displayed |
| menubar | Yes/No | Specifies whether the menu bar is displayed |
| status | Yes/No | Specifies whether the status bar is displayed |
| width | Pixels | Specifies the width of the new window |
| height | Pixels | Specifies the height of the new window |
| resizable | Yes/No | Allow or disallow window resizing |
| scrollbars | Yes/No | Allow or disallow window scrolling |
o If no parameters are set, then the value of each parameter is set to “yes” where appropriate. For example:
window.open(“http://www.bbc.co.uk/”,“bbc”, “”);
is equivalent to:
<a href=”http://www.bbc.co.uk/” target=”bbc”>
o However, if any parameter is set, all others default to “no”. So if you wanted to have a scrollbar but nothing else, the following would suffice:
window.open(“http://www.bbc.co.uk/”,“bbc”, “scrollbars=yes”);
Project
o Open your previous project file, and save it under the name chapter_25.html.
o Remove all functions and HTML from your previous file, leaving only the logo image and the link.
o Create a function in the head area script element called view_new_logo. This function should:
§ Open a new window 200 pixels square.
§ Load the image rocollogo.jpg from the images folder.
§ Be called RocolLogo
§ Be stored in an object variable called objNewLogo.
§ Have no scrollbars, be of a fixed size, and have no other features where possible.
o Remove all event handlers from the link, and add a new one to run the function above when the link is clicked.
o Once you have verified that a window pops up as required when the link is clicked, test each parameter from the table above in the function.
Recent Comments