Page 1 of 1

Using AJAX Frameworks, JavaScript prototype in HTA

Posted: Fri May 29, 2009 8:35 pm
by woowil
Most scripters are unaware that JavaScript prototypes used in AJAX Frameworks (jQuery, Dojo, YUI, etc) actually works i HTA as well. You will quickly realize that you can use any AJAX framework you want in HTA. In my case I've created my own HTA Framework with compatibility to other AJAX framework mixing the best and fastest graphical interface combined with system/network/domain management.

Here are the tricky steps for using prototypes in HTAs
1. Use JavaScript/JScript instead of VBScript in HTA development
2. Create a function in the HTA file that dynamically load JS external files into the HEAD tag.
3. Place all the prototypes in the one or more of the external files
4. Very important! Call the load function only when the HTA document is loaded. The reason is that prototypes isn't activated in HTA. For example <script src="somefile.js"> in the HEAD tag or <script>function prototest(){}</Script> in the HEAD tag both won't work.
5. Make sure the prototype function are all placed in the external files. The function can only be called from the HTA document (in the BODY tag), not in from the HEAD tag

Here is an example:

myPrototype.js

String.prototype.trim = function(){ var ii, s s = this.replace(/([ tn]*)(.*)/g,"$2"); // Removes space or newline at beginning and end if((ii = s.search(/([ tn]*$)/m)) > 0) s = s.substring(0,ii); return s.replace(/[ t]+/ig," "); // Replaces tabs, double spaces}

function protoTest1(s){ var s1 = typeof(s) == "string" ? s : " this is a testt "; var l1 = s1.length var s2 = s1.trim() var l2 = s2.length alert("BEFORE s1=" + s1 + "nl1=" + l1 + "nnAFTER s2=" + s2 + "nl2=" + l2)}

myHTA.hta
<html><hta:application id="oHTA" /><head>
<script language="JScript.Encode">

function loadJS(){ var o = document.createElement("script"); o.language = "JScript.Encode" o.type = "text/javascript" o.charset = "UTF-8" //"ISO-8859-1" o.src = "myPrototype.js" document.getElementsByTagName("HEAD")[0].appendChild(o)}
function protoTest2(s){
var s1 = typeof(s) == "string" ? s : " this is a testt "; alert(s1.trim()) // WON'T work from HTA HEAD tag!!
}

</script></head><body onload="loadJS()">

<form><input type="text" value=" this is a test " name="test"/><input type="button" value="protoTest1(): works!" onclick="protoTest1(this.form.test.value)"/>
<input type="button" value="protoTest2(): won't work!" onclick="protoTest2(this.form.test.value)"/>
<input type="button" value="RELOAD" onclick="location.reload()"/></form>
</body><html>
woowil2009-05-30 04:02:05