2008-11-03

HTA dynamic document II

The solution I sketched out 2008-10-07 I found out had one major fault - the entire DOM document was cleared, which made the solution a little too dynamic. For example also script tags was cleared...
Today I found an article about making a GUI using HTA: "Extreme Makeover: Wrap Your Scripts Up in a GUI Interface". This inspired me to play a little with the innerHTML attribute.

The script looks like this:
<?xml version=1.0" encoding=utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

<html>

<head>
 <title>Dynamic Document</title>
 <hta:application id="htaDynamicDocument" applicationname="DynamicDocument" />
 <style>
  h1, h2, p { font-family:sans-serif }
 </style>
</head>

<script type="text/jscript" language="jscript">
 function newContent() {
  var markup = "<p>Navigare necesse est!<p>"
  return markup;
 }

 function jsContent() {
  myArea.innerHTML = "<h2>jsContent</h2>" + newContent();
 }
</script>

<script type="text/vbscript" language="vbscript">
 Sub vbContent_onclick
  markup = "<p>Vivere non est necesse,</p>"
  myArea.innerHTML = "<h2>vbContent</h2>" + markup + newContent()
 End Sub
</script>

<body>
 <h1>Dynamic Document</h1>

 <input type="button" value="JScript content" onclick="jsContent()">
 &emsp;
 <input type="button" value="VBScript content" name="vbContent">

 <span id="myArea"></span>

 <p style="font-size:smaller">&copy; 2008, Niels Grove-Rasmussen &mdash; SQLAdmin.dk</p>
</body>

</html>


An execution of the script starts like this:

Clicking "JScript content" alter the document to this:

Clicking "VBScript content" alter the document to this:

If "JScript content" is clicked again, the document looks like the second image.

The trick is in two parts:
  1. The span-section with the identifier "myArea".
  2. Adding a string to the innerHTML attribute of the span-section.
The style section in the head and the JScript function newContent() are made to show that shared elements does have effect in the contents of the innerHTML attribute.