Integrated Popups Means No Extra WebPage
Today I will show you how to integrate the content of
a popup into the JavaScript code itself. No URL to a
separate web page file is required.
Loading the popup can be faster when the content is
integrated into the JavaScript code instead of requiring
the browser to retrieve the content from somewhere else.
I'll show you how to launch the popup automatically, either
immediately or after a specific delay. And I'll show you
how to let your visitor launch the popup with a link.
How does it work?
Instead of a URL in the window.open() function, a null
string is used. Then, writeln() is used to print the
content to the popup window. writeln() uses the value
returned by the window.open() function so the browser
knows it should print to the popup instead of to the
current window. Something like this:
<script language="JavaScript">
<!-- Copyright 2001 Bontrager Connection, LLC
var properties = 'height=100,width=150';
var W = window.open("","",properties);
W.document.writeln('<html><body>');
W.document.writeln('H E L L O');
W.document.writeln('</body></html>');
//-->
</script>
In the example at the end of this article, you'll notice
several lines defining the popup's properties -- whether
or not the new window shall be resizable, the new window's
height, whether scrollbars are okay, and so forth. These
properties are presented in the "Popup Basics" article,
which should be read if you're unsure about the subject.
The article is at /a/11/pl.pl?pb
Probably the easiest way to create the ...writeln... lines
(other then using Master Pop-Window Generator) is to first
create your web page.
Once your page is created, do these six steps to the source
code, in order:
- Precede each backslash ("\") with another backslash.
Thus, "\" becomes "\\".
- Precede each apostrophe ("'") with a backslash.
Thus, "'" becomes "\'".
- End each source code line with:
');
(apostrophe, close parenthesis, semi-colon)
- Begin each source code line with:
W.document.writeln('
(last character is an apostrophe)
- If your source code contains:
<!--
Replace it with:
' + '<' + '!' + '-' + '-' + '
- f your source code contains:
-->
Replace it with:
' + '-' + '-' + '>' + '
Now, your web page source code is ready to place into the
JavaScript code below the line with the window.open()
function.
In the example at the end of this article, at the third
line from the bottom, you'll find:
setTimeout("WF()",3000);
That line causes the popup to launch after a delay of
3 seconds (3000 milliseconds). You can change that number
to whatever is good for you. Or, if you prefer to launch
the popup without delay, replace that line with:
WF();
If you do not want the popup to launch automatically,
letting your visitor click on a link instead, remove the
line third from the bottom of the example ("setTimeout...").
Then, put this on your page wherever you want the link:
<a href="javascript:WF()">Click me</a>
You can change "Click me" to whatever you prefer. It can be
any text or an image.
Another option: If you prefer to launch a normal browser
window instead of a popup with control of size and other
properties, find the line
var W = window.open("","",properties);
in the example. Then, replace that line with:
var W = window.open("");
Here is the example:
<script language="JavaScript">
<!-- Copyright 2001 Bontrager Connection, LLC
function WF() {
var height = '150';
var width = '300';
var menubar = 'yes';
var toolbar = 'yes';
var locationbar = 'yes';
var personalbar = 'yes';
var directories = 'yes';
var statusbar = 'yes';
var scrollbars = 'yes';
var resizable = 'yes';
var properties = 'height=' + height +
',width=' + width +
',menubar=' + menubar +
',toolbar=' + toolbar +
',locationbar=' + locationbar +
',personalbar=' + personalbar +
',directories=' + directories +
',statusbar=' + statusbar +
',scrollbars=' + scrollbars +
',resizable=' + resizable;
var W = window.open("","",properties);
W.document.writeln('<html><head>');
W.document.writeln('<title>My Title</title>');
W.document.writeln('</head><body bgcolor="white">');
W.document.writeln('<p>Hello, I\'m Will.</p>');
W.document.writeln('<p>Where there is a Will, ');
W.document.writeln('there <b>is</b> a way.</p>');
W.document.writeln('<p align="center"><form>');
W.document.writeln('<input type="button" ');
W.document.writeln('onClick="window.close()" ');
W.document.writeln('value="Close Window">');
W.document.writeln('</form></p>');
W.document.writeln('</body></html>');
}
setTimeout("WF()",3000);
//-->
</script>
Popups almost always load faster when the content is
integrated into the JavaScript code rather than retrieved
with a URL. If the popup has many or large images, the
difference might not be as dramatic. The reason the load
can be faster is because there is one less file that the
browser needs to retrieve.
Now you know how to create your own.
Oh, one more option: If you want to make a pop-under
instead of a popup, put the line
self.focus();
below the last ...writeln... line and above the curly brace
on a line by itself.
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
©2001 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.
