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:
- A page begins unloading from a browser window in
preparation to load another:
- An error occurs while loading a page:
- A browser window is resized:
- A browser window is moved:
- A browser window becomes the top window
(gains focus):
- A browser window loses focus:
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 perenthesis "()" 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.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2000 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
