PageBuilder Document Write Advanced Editor

INTRODUCTION

This webpage is a demo of the "document.open(); - document.write();" PageBuilder advanced editing method suggested by my friend Art C, aka RTCamm@webtv.net, in a post in the news:alt.pagebuilder.help NG on Feb. 22, 2002. Art wrote a tutorial at: http://community-2.webtv.net/RTCamm/skpadved/, to explain this procedure. Art suggested using a PageBuilder webpage to open a new window formatted by javascript, and demonstrated the basic script syntax for this method in his tutorial.

This supplementary demo expands the basic syntax and provides additional script examples, explanatory comments, and suggestions for overcoming the problems noted below concerning the "funky" way the "document.open();" window functions with MSN-TV browsers and how to "document.write();" an entire HTML webpage complete with a webpage title, all webpage HTML formatting tags, and other webpage content within "document.write();" statements inside script tags. Basically; when using this method the entire webpage is written by javascript.

Below I start with a general description of this method, including navigational problems and solutions associated with this method, and provide a step-by-step procedure for constructing a webpage with this method.

This procedure is not new and has been used by Webbers for some time now, mainly in the various WebTV/MSN-TV online "tools" help webpages! Our MSN-TV browsers have long had the "document.open();" and "document.write():" features I discuss below, but only since the 2.6, 2.6.1 and 2.7 upgrades have we had functional problems due to changes in our browser's programming, relative to "document.write();" (and "window.open();" as well), which requires the work-a-rounds discussed in this tutorial.

GENERAL DESCRIPTION

Briefly, this method is accomplished by using simple javascript "document.write();" statements in a PageBuilder "Add text" box. The entire webpage content is written with "document.write();" statements inside HTML <script> tags. You can write the entire document within one (1) statement, or as several successive docwrite statements for logical division of content; ie: use one docwrite statement for the heading part of your document, containing your beginning <head> tag, <title> tag, and <body> tag; then use successive docwrite statements for each paragraph, division, or other logical element in your document; and then use an ending docwrite statement for your counters, guestbooks, other generic webpage ending code you use, including your ending </body> and </html> tags.

The webpage is constructed entirely by javascript, using text and HTML formatting tags inside "document.write();" statements. You can use javascript variable assignment to hold the sentences and paragraphs of your document, or write all the webpage content directly within the docwrite statements. I suggest you limit your variables and docwrite statements to no more than five lines each, which is a typical webpage paragraph length. I suggest that you use multiple, successive docwrite statements. You can use as many docwrite statements as you like for your webpage content, written in successive order inside one set of script tags. Or, you can use several consecutive script tags, each containing their own set of docwrite statements.

The best way to construct your docwrite script is a matter of personal preference; but, just remember in PageBuilder "Add text" boxes you must type all script with single spaces where required and allow auto-wrap within your scripts! You cannot use the "Return" key to add "whitespace" indentation in your scripts for easy reading and editing as you do in other webpage Advanced File Editors, like the Zone, Geocities, etc! You must write correct HTML syntax, using <p>,<br>, and other formatting tags inside your docwrite statements.

Also, remember that you cannot use HTML comment tags to hide scripts from non-javascript browsers in a PageBuilder "Add text" box, because PageBuilder text boxes are mini-HTML documents that are "pasted" into the basic PageBuilder table template format on the webservers; therefore the comment tags will hide and kill your docwrite statements! However, you can use javascript single-line ("//") and multiline ("/* ... */") comment tags inside your scripts for added info, such as section identifying notes and script explanations.

THE BASIC SYNTAX

Here's a few suggestions for the various ways to construct the scripts for this method. The method you use depends on the complexity of the document; but, is a matter of your personal preference and limited only by your expertise and creativity.

Use multiple "document.write();" statements only, using separate docwrite statements for each paragraph or other major division of the document, like this:

<script> document.open(); document.write('<p>Quoted text for 1^st paragraph of document.</p>'); document.write('<p>Quoted text for 2^nd paragraph of document.</p>'); document.close(); </script>

Use variables to hold the various sentences and paragraphs of the document and concatenate the elements of the various variables into the webpage content using one or more docwrite statements, like this:

<script> var para1='Sentence one. Sentence two. ... etc.'; var para2='Sentence one. Sentence two. ... etc.'; document.open(); document.write(para1 + '<br> <br>' + para2 + '<br> <br>'); document.close(); </script>

In the last example above, you use as many variables as desired for the paragraphs or divisions of the document. Then you can use separate "document.write();" statements for each variable as I show in the first example above; or use a single statement for the contatenation of all the variables into your webpage content, as I did in the last example, which is the preferred, shortcut method of writing docwrite statements with multiple variable values.

Note how I added paragraph and break formatting tags inside the docwrite statements. but, remember, you can also use returns at the end of each paragraph variable inside the quotes, in the first example above, which will give the same effect as the paragraph and break tags I added to the docwrite statements. A little practice writing your variables and docwrite statements in the many possible various ways will allow you to determine your personal scripting preferences!

The examples above show only a couple of the many possible examples for the typical scripting syntax for the javascript document; but, just remember, as noted above, that you are creating a complete javascript only document, and that you must docwrite the entire document with this syntax, complete with the beginning and ending HTML and body tags, head and title tags, and all other required HTML formatting tags inside script tags. See the step-by-step procedure below and the source code of the sample webpage that produces the new docwrite (window) webpage.

Also, note in the above scripts that I recommend you aways use "document.open();" and "document.close()" in your scripts as a matter of standard scripting practice and browser compatibility. Our MSN-TV browsers will write and open the new window without these methods at the present time - it's optional and not necessary at the present MSN-TV 2.7 upgrade level; but, future upgrades may require this stricter syntax! The use of these methods opens a data "stream" to the new document. The "document.open();" method tells our browser's javascript interpreters to store the data stream in our javascript RAM registers until the "document.close();" method closes the data stream and outputs the data in the "document.write();" statements to the webpage display.

MSN-TV DOCUMENT.OPEN METHOD AND PROBLEMS

Using this javascript advanced editing method with our MSN-TV browsers causes navigational problems that require special work-a-rounds to correct! Prior to the MSN-TV 2.6 upgrade, our MSN-TV browsers handled docwrite "new window" opens correctly. But; beginning with the MSN-TV 2.6 upgrade and subsequent 2.6.1 and 2.7 upgrades, our MSN-TV programming engineers decided for some unknown reasons that a new "docwrite window open" should replace the parent window that created the new window in our browser's history list array?

This change in the way the docwrite window open works prevents our MSN-TV browsers from returning to the parent webpage by using the "Back" key! When you use your "Back" key on a docwrite new window, you cannot return to the previous webpage that opened the docwrite new window - instead, you go to the previous webpage location before the webpage that opened the docwrite new window. The docwrite new window will replace the parent, opener window in our MSN-TV browser's history list array.

When you go to a docwrite new window webpage that we built with this AE method, you will see that the "Recent" panel does not contain a link to the parent or referrer page - the parent page has been replaced by the new docwrite page in the history list, so you cannot return with the "Back" key.

At the docwrite new window page, the "Info" key will say you are on the "WebTV Network", which means the document is "in your browser"; and the the "Go To" key "Show Last" button will show the previous webpage you visited before the previous (parent) page that created the new window document! And the "Go To" key "Show Current" button will show that the docwrite new window has been created, not on the Pagebuilder webservers, but within your browser's "cache" memory registers! This new page does not have a URL, but has a cache memory address, like this:

cache:http://community-2.webtv.net/jaxred/pbdwae/.1cf.write

Note in the above address that the "/pbdwae/" is the parent webpage title; which, ironically, is no longer in your browser's histry list array, and the ending file extension is a varying number depending on your bowser's number of cached items in the "write" cache memory registers. Also, because the docwrite new window is in our browser's cache memory, you cannot directly access the page using the above address with an online source code viewer or webpage validator; but, you can see the source code for the docwrite new window on the parent webpage that contains the script that created the new page.

This is a real MSN-TV upgrade bummer, folks! I simply cannot understand the logic of this upgrade change? It sure screwed up all our fellow Webber's tool pages that used the docwrite new window open methiod!

Shortly after we discovered the navigational problem with our "docwrite" webpages after these upgrades, expert javascripter Bob Wedge, aka RWEDGE@webtv.net, posted a solution to this problem in the news:alt.discuss.javascript NG. Bob suggested that we must put the parent page back in our history list by using his simple "Back" key navigation correction work-a-round script for MSN-TV browser upgrades 2.6 thru 2.7.

Bob's script is as follows:

<script> if ((navigator.appVersion.indexOf('WebTV;2.6') !=-1) || (navigator.appVersion.indexOf('WebTV;2.7') !=-1)) {location.href="#";} </script>

I made a slight modification to Bob's script that is simpler and just as effective, as follows:

<script language="javascript"> if ((navigator.appCodeName == "bowser") && (navigator.appMinorVersion > 7351)) {location.href="#";} </script>

In my script above, the number "7351" is the "appMinorVersion" of the old WebTV 2.5.5 upgrade; therefore, the conditional test in the script: "(navigator.appMinorVersion > 7351)", detects all upgrade versions "greater-than" the 2.5.5 upgrade, which includes: upgrades 2.6, 2.6.2 and 2.7!

Remember, you must code your preferred script in the new window code as shown below. The only tacky and annoying effect of using these scripts is that the MSN-TV browser jumps to the top of the webpage (the current, parent, or referrer webpage) before opening the new window? Then when using the "Back" button, the browser returns to the top of referrer webpage instead of returning to the point in the webpage where the "open new window" button is located? This is the correct function when the "#" symbol is used in a link inside a document! Bob's script causes the jump to the top of the document to place the parent document back in the browser's history list ahead of the new docwrite window open so you can use the "Back" key to return to the parent document that created the new window - thanks to Bob for his solution to this upgrade problem!

As another option to solve this problem, I added a "name" link where the new window open button is located and used the absolute URL of the button link in the scripts shown above. This modified script is as follows:

Far down this webpage at the second and third new window open form buttons, I add this link:

<a name="retlink"> </a> <div align="center"> <form> <input type="button" value="Open a new window" onClick="newWin();"> </div>

Then, I use that link location absolute URL in the script in place of the "#" symbol used in the other scripts above, like this:

<script> function newWin() {if ((navigator.appCodeName == "bowser") && (navigator.appMinorVersion) > 7351) {location.href="http://community-2.webtv.net/jaxred/pbdwae/index.html#retlink";} </script>

This works OK; except with MSN-TV browsers, as soon as I click the new window open button, the webpage jumps to the bottom of the webpage below the MSN-TV link before the new window opens; but, when I use the "Back" key on the new window to return to the referrer webpage, I return to the exact location of the new window open button instead of returning to the top of the parent (referrer) page as the other scripts above. The jump to the bottom of this webpage using this method is caused by our browser's upgrade programming, which mimics our browser's "window.open();" function which opens an iframe at the bottom of the current or parent document. The browser jumps to the bottom of the webpage to load the link URL into the iframe location at the bottom of the document; but, when the document is a "docwrite" document, our browsers write the document in a new window that is opened from cache memory.

The reasons these methods function as they do is easily understood; but, I really think this is a "crappy" way for our browsers to handle a simple javascript window open and docwrite new window open! I just cannot understand why it is necessary for our MSN-TV browsers to function this way? I guess this is about the best we can expect using these these types of scripts? Just use your choice of the above scripts - whether you want to briefly jump to the top or bottom of the parent page before the docwrite new window opens!

But; when I originally discovered the history list replace problem, I devised a very simple way to return to the referrer webpage, which seems to be the best way to solve the problem because the MSN-TV browser window doesn't jump to another location on the webpage before the new window is opened! I very simply solved the problem by adding a return link in the script for the new window document in which I used the absolute URL of the new window open button name link, like this:

document.write('<br> <br>Click to <a href="http://community-2.webtv.net/jaxred/pbdwae/index.html#retlink"> <font color="#ffd700">Return</font> </a> to the previous webpage.<br> <br>');

I used this script originally on an image webpage that docwrites the image URL's when I discovered this problem with my webpage after receiving the 2.6.1 upgrade. The webpage with the return link on the docwrite new window is at:

http://community-2.webtv.net/jaxred/Bkgnds1/index.html#docwrte

I added the above link code to the bottom of the script for the new window document. In the demo script below, I show both the history list replace script and the return link at the bottom of the new webpage shown in the basic script below. Use your choice of these options - you can either use your "Back" key, or use the link on the docwrite new window cached page, to return to the parent webpage.

VIEW A DEMO SCRIPT AND NEW WINDOW

Here's an example of the basic syntax for a short webpage script:

<script language="javascript"> function newWin() {if ((navigator.appCodeName == "bowser") && (navigator.appMinorVersion) > 7351)) {location.href="#";} var para1='This is a demo of the "docwrite" PageBuilder advanced editing method. All the webpage content is created by javascript. The entire webpage content is written using "document.write()" statements inside HTML script tags. Note that this new page has a title in the title bar that is coded in the script.'; var para2='While this is a simple and viable method for expert scripters, it appears to me to be more complex than the popular PB AE comment, Defeat, noscript, and script methods for the average PageBuilders. I do not believe this method will ever achieve the popularity of these old familiar methods!'; document.open(); document.write('<html> <head> <title>PB Document Write AE Method Demo</title> </head> <body bgcolor="#000080" text="#ffffff"> <h1 align="center"> <font color="#ffd700"> <i>PB Document Write Method Demo</i> </font> </h1>'); document.write(para1 + '<br> <br>' + para2); document.write('<br> <br>Click to <a href="http://community-2.webtv.net/jaxred/pbdwae/index.html#retlink"> <font color="#ffd700">Return</font></a> to the previous webpage.<br> <br>'); document.write('JaxRed</body> </html>'); document.close();} </script> Click the button below to view the new window:

<a name="retlink"></a><div align="center"> <form> <input type="button" value="Open a new window" onClick="newWin()"> </form> </div>

Note: The above sample script contains both the suggested codes for correcting the navigational problems noted above. The new window examples below uses each option individually. I have labeled the scripts for the following examples so you can see the source code of each script with the webpage souce code viewer at the bottom of this webpage. Use either option as you desire; but, again I remind you: just be sure that these features are coded with the proper syntax inside the "document.write();" statements, so that the code is "outputed" to the "new window" document, instead of being added to the current or parent document!

You must follow a consistent script syntax with the quotes in your variables and docwrite statements. Note how I start out using single-quotes for my variables and docwrite statements so I can properly use nested double-quotes for quoted phrases inside variables and HTML tag quoted attributes. The beginning single quotes allows me to nest double-quotes without having to escape them with "backslashes"; because when editing PageBuilder text boxes, the backslashes disappear every time you open a text box - replacing lots of lost backslashes is time-consuming irritating! Choose your preferred scripting syntax and use it consistently!

When I was testing this method, I could not use MSN-TV transitions or background image code in the docwrite statement body tag, and I could not use style code in the docwrite statement head tag to load a background image either! I could not get an embed tag to work for bgsound in the docwrite statement inside the body tag either! Pehaps someone will have the patience, exprtise, and time to figure out work-a-rounds for these popular features?

Also I could not use a docwrite statement body tag "onLoad" event handler for a javascript alert. However, I could use a script tag inside the docwrite statement head tag or inside the body tag of the document if I completely escaped the script tag angle brackets, like this:

\<script\> alert('Javascript works in the new window, and there is a title in the title bar!'); \</script\>

Using scripts in this manner causes that very irritating problem of having to replace the backslashes each time I opened the PageBuilder text box for editing!

You will notice from the source code that I only have a javascript bug warning on this parent page. I don't think you will ever need a JS bug warning on the new window document. If the JS bug strikes your parent page, the javascript will not function to write your new window document. It's a very remote possibility that the javascript could be OK on the parent page and then not work on the new window document due to JS bug stricking the browser after the javascript opens the document? However, it is possible for the script contents of the new document window to cause "power offs" with some older MSN-TV browsers with limited RAM?

Below, I include three demos of the docwrite new window open using the three script options I explained above. I labeled each script with HTML comment tags so you can see the specific code for each example with the source code viewer below.

This first example uses the "#" symbol in the parent page reload script. As explained above, the browser window will temporairly jump to the top of this webpage to load this parent page into the browser's history list before the docwrite new window is opened.

Click the button below to view the new window:

This second example uses the absolute URL of the window open button in the parent page loading script as explained above. When you click the window open button below, the browser window will jump to the bottom of the webpage below the MSN-TV link before the new docwrite window opens. This example also uses a background gif image from my scrapbook coded in the body tag inside a docwrite statement.

Click the button below to view the new window:

This third script uses the return link in the new window docwrite statement. You cannot use the"Back" key to return to this parent webpage from the new docwrite window - you must use the link on the new window page to return to this webpage. It's the best acting new docwrite window because the browser window does not jump to the top or bottom of the webpage before opening the new window; but, this advantage is negated because you must tell your viewers that they must use the link on the new window to return to this page if desired! If they try to use the "Back" key, they will go to the previous webpage before this webpage, and may subsequently "click back" back thru their browser's history list array, apparently losing this page:

Click the button below to view the new window:



	Powered by MSN TV	next page