Convert HTML / Script to Javascript Include Source

by Peter A. Bromberg, Ph.D.

Peter Bromberg
"You know, the great thing about technology is there's always something new around the corner.
You know, the crappy thing about technology is there's always something new around the corner."
-- anonymous Digg posting, May 2006

There may be situations where you want to be able to take some HTML and / or Javascript, and turn this entirely into a script source containing all "document.write" 's. By doing this, you can make the source part of the target of a <script> tag your file, and take advantage of the fact that javascript script tags are the ONLY way you can get around the silly browser restrictions on XMLHTTP. By rendering your client- side objects as JSON, you can implement some pretty cool Remote Scripting ("AJAX" for you script kiddies) calls without worrying about having to create server-side proxy pages. Yahoo uses this for some of their developer API, so does del.icio.us.

So to facilitate experimentation, I've put together this liitle online form. You paste your HTML/Script into it, press the button, and you get back a block of script that you can include as the src property of an "on demand" script tag. This could be returned, as well, by an ASHX handler or ASPX page that accepts items on the querystring, assembles the results as JSON, and returns that plus the script to render it.



JSON has merit primarily because it is the only way you can successfully perform cross-domain remote scripting calls with any browser, without resorting to a server-side "proxy page", is to employ an "on demand" script tag that retrieves JSON (Javascript Object Notation) from the source. A typical implementation of this might look like so:

function msAddScript( url, query, callback)
{
eltScript = document.createElement("script");
eltScript.setAttribute("type", "text/javascript");
if( url.indexOf('?') > -1)
url += '&';
else
url += '?';
url += 'q=' + query +"&callback=" +callback;
eltScript.setAttribute("src", url);
document.getElementsByTagName('head')[0].appendChild(eltScript);
}

The server would return a block of client script that essentially looks like this:

callbackMethod( JSONDataHere );

When a script tag is added to the DOM dynamically as in the above, the script is automatically executed, regardless of what domain it was loaded from! This is why the restrictions on XMLHTTPrequest are, in my opinion, so childish. So the callback is automatically invoked with the JSON data as a parameter and everthing is eval-ed and executed, including whatever DOM contructs you have to build your visible results. I should mention also that Jason Diamond's Anthem.Net has a Manager class that already does all this, including creating JSON representations of every possible object including even a DataSet.

To ensure that any HTML that you want generated from Javascript document.write statements does not get misinterpreted as Javascript we place a backslash (\) in front of certain characters in the text. Each line of HTML source is also separated by \n so that the linefeeds will be correctly inserted into the generated HTML.

Paste your HTML (including script) code into the following form and press the Convert button and the required changes will be made to your code. It also encloses the code into document.write statements for you.

To show you what can be done with the above, there is an "on demand script tag" in this document that references a source generator for our "Search Related" feature here on eggheadcafe.com. If you highlight any word or short phrase on this page, you can right-click and our "search related": engine script will kick into action and pop up a window full of resuts!

Peter Bromberg is a C# MVP, MCP, and .NET consultant who has worked in the banking and financial industry for 20 years. He has architected and developed web - based corporate distributed application solutions since 1995, and focuses exclusively on the .NET Platform.
Article Discussion: