|
|
| ||||
The Open() MethodOpening a new browser window is pretty simple. You just use the "window.open()" method. Check out this this pop up window. Where are the toolbar buttons? Notice that this window has been sized and styled far beyond anything you can do with the <a> tag's TARGET attribute. That's part of the beauty of using JavaScript to open windows. Lets begin by making a link that will call the function that will open your window. If you don't use a function, the child window will open when the code is read as the parent page loads. This is how all those advertising pop ups generally get loaded. I'll be kinder and let you click a link when you're ready for a pop up window.
<body> The above tells the browser to run the function "open_a_window_please()" when the link is clicked. Now lets code the function in the <head> of our main page (soon to be parent page).
<script language="JavaScript"> The above function will open a new window and load the web page file named "childpage.htm". Of course you can open any page you want, even on other sites. Just put the URL to the page inside quotes. This doesn't anything more than the <a> tag's TARGET="_blank" attribute right now, but we'll about to learn all sorts of things we can do with this new window. Closing Your WindowThe first thing we'll learn to do is close the window we just learned how to open. Before we can close the child window from the parent window, we need to give the child window a name that can be referred to in JavaScript. I'm going to name our window "lovechild". To attach this name to the new window, we'll set "lovechild" equal to the "window.open()" statement without using a VAR statement before "lovechild":
<script language="JavaScript"> It's very important to notice that we do not use the JavaScript "var" to declare this name as a variable (var lovechild =). That's because "lovechild" is a name, not a variable. The difference is that a variable is set up to hold input data like in our Confirm() and Prompt() boxes. A name, on the other hand, assigns a string, like "lovechild", to a JavaScript object, like our child window. Now we have a name that can tell the browser which window to close. We're ready to use the "window.close()" method. In the parent page add the following closing link:
<body> Try the code out by clicking the links below:
Nifty, huh? What's important to remember here is that a name assignment isn't a variable (VAR) assignment. A name must be given to a created object if you want to refer to that specific object later with JavaScript. Your Window's Second NameThere's a second name your child window will have, too. It's put in the parentheses of the "window.open()" method: lovechild = window.open ("childpage.htm","another_baby_window") This second name, "another_baby_window", isn't used by JavaScript. It's used when the child window is referred to by an HTML tag like a form submission. Don't worry so much about this now. It's not required and not used by JavaScript, but HTML. Most programmers use the same name both in the JavaScript assignment and the HTML name in the parentheses. My "Closing" CommentsOne last note on closing. You can't close a window you didn't open. There are some convoluted schemes to simulate this effect, but most are just downright irritating. If you close the original window a viewer used to reach your site, they'll get a warning and can prevent the closing in all modern browsers. You can close a window from a link inside itself (as opposed to a parent window) by using "window.close()" or "self.close()" as well as its window name. Again, if you didn't open the window, you can't close it. Remember that if you want to manipulate a window with JavaScript, you need to open it with JavaScript and assign it a unique name. You probably noticed that I put "window.open()" in a function, but "window.close()" right in the HTML tag. As you'll soon see, your "window.open()" statement will get pretty bulky, and bulky JavaScript is best put in a function. The "window.close()" method doesn't get much bigger and is most frequently coded right in the HTML tag. ExercisesMake a page that will open and close at least three child windows. Remember that each child window will need a unique name assigned to it to distinguish it from the others. Sort of like what your parents did to you. Try a few self-closing JavaScripts in the child windows' pages -- self.close(), window.close(). |
||||
| ||||