topical media & game development

talk show tell print

#javascript-generator-html-xhtml.htm / htm



  
  <!-- THREE STEPS TO INSTALL HTML2XHTML:
  
    1.  Copy the coding into the HEAD of your HTML document
  
    2.  Add the onLoad event handler into the BODY tag
  
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  V. Smolin -->
  
  <!-- Web Site:  http://html2xhtml.richarea.com -->
  
  <script language="JavaScript" src="html2xhtml.js"></script>
  
  <script language="JavaScript">
  
  // this variables are necessary for the demo only
  
  //encoding parameters
  
  var lang = "en";
  
  var encoding = "iso-8859-1";
  
  //determine IE version
  
  var ie_data = navigator.userAgent.match(/MSIE ([0-9|\.]+)/);
  
  var ie_version = null;
  
          if (ie_data) {
  
                  ie_version = parseFloat(ie_data[1]);
  
          }
  
  var can_parse = false;
  
  // this variables are necessary for the demo only
  
  function write2iframe(){
  
  var page_mode = get_page_mode();
  
  //*
  
  //get html text to convert
  
  var text2set = document.getElementById('html2convert_source').value;
  
          if (!page_mode) text2set = '<html><body>'+text2set+'</body></html>';
  
  //write the text to iframe to access it later via dom object
  
          if (document.all) {
  
  var iframe_doc = html2convert.document;
  
          } else {
  
  var iframe_doc = document.getElementById('html2convert').contentWindow.document;
  
          }
  
          if (document.all && ie_version < 5.5) {
  
                  //ie5.0 could generates onload event earlier then loading is actually finished
  
                  iframe_doc.onload = setTimeout('parse_iframe()', 1);
  
          }
  
          iframe_doc.open();
  
          iframe_doc.write(text2set);
  
          iframe_doc.close();
  
  }
  
  //convert html to xhtml and write to destination textarea
  
  function parse_iframe(){
  
          if (!can_parse) return;
  
  var page_mode = get_page_mode();
  
  //determine source dom object
  
          if (document.all) {
  
                  var iframe_doc = html2convert.document;
  
          } else {
  
                  var iframe_doc = document.getElementById('html2convert').contentWindow.document;
  
          }
  
          if (page_mode) {
  
                  var source_obj = iframe_doc;
  
          } else {
  
                  if (document.all) {
  
                          var source_obj = iframe_doc.body; //html fragment ie
  
                  } else {
  
                          var source_obj = iframe_doc.documentElement; //html fragment mozilla
  
                  }
  
          }
  
  var xhtml_content = get_xhtml(source_obj, lang, encoding);
  
          if (document.all) {
  
                  html2convert_result.value = xhtml_content;
  
          } else {
  
                  document.getElementById('html2convert_result').value = xhtml_content;
  
          }
  
  }
  
  //allow to convert if the whole document is loaded only
  
  function init(){
  
          can_parse = true;
  
  }
  
  function get_page_mode(){
  
          if (document.all) {
  
                  return page_mode.checked;
  
          } else {
  
                  return document.getElementById('page_mode').checked;
  
          }
  
  }
  
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="init()">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <!-- This script and many more are available free online at -->
  
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- Original:  V. Smolin -->
  
  <!-- Web Site:  http://html2xhtml.richarea.com -->
  
  <!--<iframe id="html2convert" onload="parse_iframe();" style="width:1px;height:1px;display:snone;visibility:hidden">  </iframe><br />-->
  
  html:<br />
  
  <textarea id="html2convert_source" rows="13" cols="80">
  
  <STYLE type=text/css>.top {
  
   BORDER-RIGHT: #33ff33 1px solid; BORDER-TOP: #33ff33 1px solid; BORDER-LEFT: #33ff33 1px solid; BORDER-BOTTOM: #33ff33 1px solid; BACKGROUND-COLOR: #c8c4bb
  
  }
  
  .bottom {
  
   BORDER-RIGHT: #ff3333 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: #ff3333 1px solid; BORDER-BOTTOM: #ff3333 1px solid; BACKGROUND-COLOR: #d4d0c8
  
  }
  
  .nav:hover {
  
   FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
  
  }
  
  .nav {
  
   FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #666666; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none
  
  }
  
  .text {
  
   FONT-SIZE: 10px; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
  
  }
  
  </STYLE>
  
  <P><FONT size=6><FONT face=Verdana><STRONG><FONT color=#6633ff><FONT color=#ff6633>R</FONT>ich <FONT color=#ff6633>E</FONT>ditor</FONT>!</STRONG></FONT></FONT><BR>
  
  <TABLE style="WIDTH: 100%" borderColor=#6600ff cellSpacing=0 cellPadding=0 bgColor=#ccffff border=2>
  
  <TBODY>
  
  <TR>
  
  <TD><IMG style="WIDTH: 259px; HEIGHT: 32px" src="http://www.richarea.com/demo_rich/files/apache_pb.gif"></TD>
  
  <TD>
  
  <UL>
  
  <LI><FONT color=#cc6633><FONT face="Courier New" size=2>Create <EM>images</EM>, <EM>tables</EM>; right click to edit it!</FONT> </FONT>
  
  <LI><FONT face="Courier New" size=2><FONT color=#cc6633>Use RE in your forms instead <STRONG>textarea</STRONG></FONT></FONT></LI></UL></TD></TR></TBODY></TABLE></P>
  
  <P><SPAN class=nav>Full <SPAN class=header>stylesheet</SPAN> support available!</SPAN><SPAN class=special> Now RE works with <SPAN class=header>FLASH</SPAN>!</SPAN></P>
  
  </textarea>
  
  <br />
  
  xhtml:<br />
  
  <textarea id="html2convert_result" rows="13" cols="80">
  
  </textarea>
  
  <br />
  
  <iframe id="html2convert" onload="parse_iframe();" style="width:1px;height:1px;display:snone;visibility:hidden">  </iframe><br />
  
  <input id="page_mode" type="checkbox" value="1"><label for="page_mode">convert whole page</label></input> 
  
  <input type="button" onclick="write2iframe();" value="html => xhtml" />
  
  <p><center>
  
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  
  </center><p>
  
  <!-- Script Size:  5.98 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.