Automatic Page Events
Your visitor's browser knows when it has finished loading a page. Using JavaScript, you can make things happen at that point.
The browser also knows when it unloads the page as it prepares to load another. It knows when the page is in focus (in the top window and active) and when the page goes out of focus.
You can make things happen at those points, too.
Many different things can happen, probably limited only by your imagination. Here are a few:
- Ensure a window always stays on top.
- Create a popup box.
- Make a popup box close automatically.
- Keep visitors on your page or on your site.
- Spawn new browser windows.
- Resize browser windows.
Although you may have experienced one or more of the above used inappropriately and possibly even used to bully; clueless, insecure, and greedy folks do not dictate whether or not features are useful to the rest of us.
Loading, unloading, gaining focus, losing focus -- these are called "events". When a program is instructed to do something during the timing of an event, it is "capturing" the event. In JavaScript, events are captured with special event handlers. Event handlers are used by using their name.
There are other related events that can be captured. Here is a short list with the JavaScript event handler names used to capture them:
- A page completes loading into a browser window:
- onLoad
- A page begins unloading from a browser window in
preparation to load another:
- onUnload
- An error occurs while loading a page:
- onError
- A browser window is resized:
- onResize
- A browser window is moved:
- onMove
- A browser window becomes the top window
(gains focus):
- onFocus
- A browser window loses focus:
- onBlur
Use event handlers by putting them within the <body...> tag of your page. Like this:
<body EventHandlerName="_________">
with the underscore being the instructions what to do. The instructions could be "self.focus" if you want the window to gain focus, for example. Or, the instructions could be "myfunction()" if you want a function to be called and executed.
Here are a few examples of things you can do with the browser window:
onBlur="self.focus"
makes the browser window gain focus every time it loses focus. In other words, the window remains the top window.
onLoad="self.focus"
makes sure the browser window is in focus when the page finishes loading.
onLoad="self.status='Thank you for visiting us'"
puts the message between the apostrophes into the browser's status message area when the page completes loading. (The message will disappear as soon as another status message is displayed.)
onUnload="resizeTo(400,200)"
resizes the browser window to 400 pixels wide and 200 pixels deep when your visitor leaves the page.
onError="window.location = '/'"
sends the visitor to willmaster.com if there was an error while loading the page.
onLoad="if(self != top) top.location=self.location"
pops your page out of any frame it might be in. (The "!=" means "not equal".)
onLoad="if(self == top) window.location = 'frameset.htm'"
displays the page within the frame defined in frameset.htm -- if it is initially loaded into the browser without a frame. (The "==" means "does equal".)
onLoad="self.scrollTo(0,70)"
scrolls the page all the way to the left side and 70 pixels down from the top when your page finishes loading. (Can be useful if you have a banner or other stuff at the top that you don't want seen right away.)
onMove="self.moveTo(25,50)"
puts the browser window 25 pixels from the top of the screen and 50 pixels from the left side of the screen whenever the browser window is moved. In other words, the window can't be moved to stay anywhere else. If you want to move the browser window into that position from the first, put this into the body tag, too:
onLoad="self.moveTo(25,50)"
Body tags can contain several different event handlers and their instructions. However, any specific event handler should appear only once. For example, do not use the onLoad handler more than once in the body tag.
If you want more than one thing to happen onLoad (or other specific event), or if what you want to do takes more than one line of JavaScript code, have the instructions call a function you write for that purpose. Example:
onLoad="stufftodo()"
(The two parentheses "()" are necessary to tell the browser "stufftodo" is a function.)
Here is a function called "stufftodo()" that first makes sure the browser window is in the top-left corner of the screen. Then it creates a popup box and fills it with the contents from URL "mywebpage.htm"
<script name="JavaScript"><!--
function stufftodo() {
self.moveTo(0,0);
window.open("mywebpage.htm","","height=200,width=300");
} //-->
</script>
Place all JavaScript functions having to do with event handlers between the <head> and </head> tags of your web page. This ensures the functions get loaded into memory before they are called from the <body...> tag.
The above can open a lot of possibilities for you. Try whatever your imagination says might be possible.
Who knows, you may be the person to invent something new to do with event handlers, something that has never been done before.
Will Bontrager
