Tuesday, January 17, 2006
Opening New Windows, Part 3
Blog Entry #27
Greetings, my fellow Weekend Silicon Warriors...we conclude our series of entries on opening new browser windows by checking over HTML Goodies' JavaScript Primers #12. Primer #12 is ill-fittingly named "Opening a Window with a Function" on the HTML Goodies JavaScript Primers page; we'll see below that the function part of the Primer #12 Script is little more than 'excess baggage' with respect to the script's execution. In accord with Joe Burns' promise at the end of Primer #11 - "Next primer, we'll get into a very slick way of making one page into two" - let's give Primer #12 a better title: "Opening New Windows: Coding the Openee Window in the Opener Document." As an aside, Primer #12 mirrors the "Page Inside A Page" section of Joe's separate "So You Want To Open A Window, Huh?" tutorial - it's not clear which was written first.
The Primer #12 Script is largely an application of the "Variabilizing an 'openee' window" methodology that we outlined in the previous post; it appears below:
<SCRIPT type="text/javascript">
function openindex( )
{
var OpenWindow=window.open("", "newwin",
"height=300,width=300"); // function command #1
OpenWindow.document.write("<HTML>") // function command #2
OpenWindow.document.write("<TITLE>New Window</TITLE>") // function command #3
OpenWindow.document.write("<BODY BGCOLOR='00ffff'>") // function command #4
OpenWindow.document.write("<CENTER>") // function command #5
OpenWindow.document.write("<font size=+1>
New Window</font><P>") // function command #6
OpenWindow.document.write("<a href=
'http://www.htmlgoodies.com' target='main'>
This will open<BR> in the main window</a><p>") // function command #7
OpenWindow.document.write("<P><HR WIDTH='60%'><P>") // function command #8
OpenWindow.document.write("<a href=''
onClick='self.close( )'>
This closes the window</a><p>") // function command #9
OpenWindow.document.write("</CENTER>") // function command #10
OpenWindow.document.write("</HTML>") // function command #11
}
</SCRIPT>
...and in the BODY command:
onLoad="openindex( )"
As shaped above, the script does not execute but throws errors, which can be eliminated by getting rid of the line breaks in function commands #6, #7, and #9.
Once corrected, the script, via the onLoad-triggered openindex( ) function, pops up a small window, named "newwin", that is similar to the "joe" window of Primer #11. Function command #1 opens the window with a window.open( ) command whose URL parameter is left blank via empty quotes, and assigns the window to the OpenWindow variable, which serves to reference "newwin" for the rest of the function. The remaining function commands then 'fill in the blank,' so to speak; specifically, a series of OpenWindow.document.write( ) commands writes text and HTML to the "newwin" page display in a normal manner.
Function commands #2-#11 can be rolled into a single OpenWindow.document.write( ) command:
OpenWindow.document.write("<html><title>New Window</title>...</center></html>");
in much the same way that an HTML document can be written as one long, continuous line; however, the use of 10 OpenWindow.document.write( ) commands makes the code easier to follow, obviously.
Other code notes
(1) If desired, function command #3 can be replaced with:
OpenWindow.document.title = "New Window";
(2) Joe centers the "newwin" document body with a <center> tag, which was deprecated with the advent of HTML 4.0; if we want to be a bit more up-to-date, then we can delete function commands #5 and #10 and instead retool function command #4 as:
OpenWindow.document.write("<body bgcolor='00ffff' style='text-align: center;'>");
(3) Function command #6's "New Window" text string is marked up with a <font> tag, which also was deprecated with the advent of HTML 4.0; a near-equivalent and more permissible formulation would be:
OpenWindow.document.write("<h3>New Window </h3>");
// use of the <h3> tag allows us to ditch the <p> tag after the closing </font> tag
(4) Function command #7 repeats the target='main' mistake of Primer #11; per the previous post, we'll need to add:
window.name = "main";
to the beginning of the script, either before or inside of the openindex( ) function, to ensure that the link destination page loads in the opener window.
My attempts to replace target='main' with a window.opener command were mostly successful, but not glitch-free; the following code:
OpenWindow.document.write("<a href='' onclick='window.opener.location=\"http://www.htmlgoodies.com\";'>This will open<br> in the main window</a><p>");
reliably loads the HTML Goodies home page into the opener window, but a separate 300×300 window holding the opener document also pops up; I was able to suppress this by setting href='#' (as though it were an internal link, but without an anchor to jump to) when using MSIE, not so when using Netscape.
(5) Either the <p> tag at the end of function command #7's OpenWindow.document.write( ) instance or the <p> tag at the beginning of function command #8's OpenWindow.document.write( ) instance should be eliminated (alternately, we could replace these tags with <br> tags); Joe notes in the "Adding Blank Lines" section of his "So, You Want To Align Text, Huh?" tutorial that a series of n consecutive <p> tags gives no more whitespace than a single <p> tag. Moreover, the <p> tag at the end of function command #9's OpenWindow.document.write( ) instance serves no purpose and can also be dropped. (I wouldn't be me if I didn't carp about these kinds of things.)
(6) It would be good form to precede the </html> tag in function command #11's OpenWindow.document.write( ) instance with a closing </body> tag:
OpenWindow.document.write("</body></html>");
however, this is optional.
(7) Finally, the use of a function here is totally unnecessary. Comment out the function openindex( ), {, and } lines, and remove onLoad="openindex( )" from the <body> tag, and the shape-corrected script works A-OK.
Quick comments on the Primer #12 Assignment
In the Primer #12 Assignment, Joe asks the reader to "create...using a function" a pop-up window that, inter alia, incorporates the user's name, to be solicited priorly by a prompt( ) box, in the window title bar. If we follow the 'letter of the assignment,' then there's no reason why we can't use the two windows-two documents approach of Primer #11 in crafting an answer:
In the opener document:
<script type="text/javascript">
function P12A( ) {
window.open("openee.html", "", "width=300,height=300"); }
P12A( );
</script>
openee.html code:
<html><head><title></title>
<script type="text/javascript">
var fn = window.prompt("Kindly tell us your first name:");
document.title = "Hello " + fn + " - Here is your window!";
</script></head>
<body bgcolor="green">
Click <a href="" onclick="window.close( );">here</a> to close the window.
</body></html>
But of course, Joe really wants you to use the two windows-one document approach of Primer #12. I have but one comment on Joe's assignment answer, which closely follows the Primer #12 Script and in which "...[t]he TITLE command was broken into three parts so that the variable 'name' [to which the prompt( ) output is assigned] could be added":
OpenWindow.document.write("<title>");
OpenWindow.document.write("Hello " + name + " Here is your window!");
OpenWindow.document.write("</title>");
Without loss of clarity, there's no reason why the above can't be a single line of code:
OpenWindow.document.write("<title>Hello " + name + " Here is your window!</title>");
(or OpenWindow.document.title = "Hello " + name + " Here is your window!";)
I originally planned to do a 'tour of review' through HTML Goodies' "Opening New Windows With JavaScript" tutorials in this entry. In particular, I was going to readdress the "no title bar" topic - I had sloppily failed to notice on MSDN's window.open( ) page that the titlebar new window feature is not Netscape-specific, but can be set to "no" when using MSIE under specialized conditions - and I was going to revisit the coding of images in openee windows in light of/response to the bizarre script that appears in Joe's "Remote Image" tutorial. On second thought, however, I think our time is better spent pushing on in the HTML Goodies JavaScript Primers series, so in the next post we'll discuss Primer #13, which covers the confirm( ) method of the window object and will also introduce us to if...else statements, a very important and ubiquitously used part of the JavaScript toolbox.
reptile7
- posted by A. Peak @ 2:07 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)