Validate an html document that I wrote with document.write()

StackOverflow https://stackoverflow.com/questions/7559166

  •  30-01-2021
  •  | 
  •  

Question

Ok first off let me state that I know I should never do this under any circumstances for a real site. Ok. That's out of the way.

One of my coworkers was going off that Javascript is not a "real" programming language (his definition of "real" seems to be "it compiles"), because it depends on other languages to do its thing.

I told him I could write a website using nothing but javascript.

I am sure that this can be done, using document.write('') to get the doctype, and some script to create a dom and styles... but the problem is since the page is validated without JS, it can't show him that what the browser is looking at does in fact validate.

Anyone know of a way I can validate the actual source the browser is using instead of the javascript that initially loaded?

Was it helpful?

Solution

If you really want to demonstrate that JS is a "real" language, then you would probably be better off not using a browser as the foundation. A node.js server would allow you to generate an HTML document (using document.write if you like, but DOM is an option (and people have used client side libraries to manipulate a document in node.

Since the JS runs on the server, you can get the actual source from the browser via view-source or point the validator directly at the URI (so long as it is either public or you install a local copy of the validator)

OTHER TIPS

Load the site in Firefox with Firebug installed. Fire up the "HTML" view and rightclick on the <html> node and select "copy HTML".

The closest you get using JavaScript:

var generatedHTML = document.documentElement.innerHTML;
//Retrieves everything within the (missing)HTML tags.
//The only missing parts are DOCTYPE and the <html> itself

var txt = document.createElement("textarea");
txt.style.cssText = "width:99%;height:99%;position:fixed;z-index:999;top:0;left:0";
txt.value = generatedHTML;
txt.ondblclick = function(){this.parentNode.removeChild(this)};
//Adding a simple function to easily remove the textarea once finished

document.body.appendChild(txt);

Bookmarklet (I have slightly adjusted the code to be compact):

javascript:void(function(){var t=document.createElement("textarea");t.style.cssText = "width:99%;height:99%;position:fixed;z-index:999;top:0;left:0";t.value=document.documentElement.innerHTML;txt.ondblclick=function(){t.parentNode.removeChild(t)};document.body.appendChild(t)})()
  1. Focus the generated textarea
  2. Manually add the DOCTYPE + <html> tags
  3. Copy the contents of the textarea to the validator at: http://validator.w3.org/#validate-by-input
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top