Example: HTA Browser Object

===============================================
<!--              HTA: load.hta             -->
===============================================


<html>
<HTA:APPLICATION
   ID="oHTA"
   APPLICATIONNAME="Load HTA"
   BORDER="thick"
   BORDERSTYLE="normal"
   INNERBORDER="no"
   CONTEXTMENU="yes"
   CAPTION="yes"
   ICON="icon.ico"
   MAXIMIZEBUTTON="yes"
   MINIMIZEBUTTON="yes"
   SHOWINTASKBAR="yes"
   SINGLEINSTANCE="yes"
   NAVIGABLE="yes"
   SCROLL="yes"
   SCROLLFLAT="no"
   SYSMENU="yes"
   VERSION="1.0"
   WINDOWSTATE="normal"
/>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=9">
    <title>Load HTA</title>
<script type="text/javascript">
<!--
function loadHTA() {
// window size
var resW=screen.availWidth
var resH=screen.availHeight

if (resW <= 800) {
 myW=resW-30
 myH=resH-20
 self.focus()
 self.moveTo(eval(resW/2-myW/2), eval(resH/2-myH/2))
 self.resizeTo(eval(myW),eval(myH))
} else {
 self.focus()
}
}

// Abort if not IE55
var ie55up=/*@cc_on!@*/!window.createPopup;
var abortStr='HTA mode requires Internet Explorer 5.5.   \n';
function Aborting() {
if (!ie55up) {alert(abortStr);self.close()}
}
//-->
</script>
</head>
<body onload="loadHTA();Aborting()">
<div><a href="htaframe.htm">Test HTA</a></div>
</body>
</html>



===============================================
<!--            Default: load.htm           -->
===============================================


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Default Page</title>
<script type="text/javascript">
<!--
// load frames in HTA mode
var hta=(window.createPopup||!!window.MSStream)?!window.external:false;
var URL=(hta) ? "htaframe.htm" : "page1.htm";
function testHTA() {document.location.href=URL}
//-->
</script>
</head>
<body>
<div><a href="javascript:void(0)" onclick="testHTA();return false">Test HTA</a></div>
</body>
</html>



===============================================
<!--        Frameset: htaframe.htm          -->
===============================================


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTA Frames</title>
</head>
<frameset rows="23,*" border="0">
<frame name="mbarframe" application="yes" src="mbar.htm" marginwidth="1" marginheight="0"
 scrolling="no" frameborder="0" noresize="noresize">
<frame name="mainframe" application="yes" src="page1.htm" marginwidth="1" marginheight="0"
 scrolling="auto" frameborder="0" noresize="noresize">
</frameset>
</html>



===============================================
<!--          Main Frame: page1.htm         -->
===============================================


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Template Page1</title>
<script type="text/javascript">
<!--

var w3cdom=(document.getElementById&&document.childNodes&&document.createElement);
var mframe=(parent.frames.mbarframe)?true:false;

if (w3cdom) {parent.document.title=document.title} // show current page title in the title bar
if (mframe) {document.ondragstart=new Function("return false")} // prevent dragging of links

function marr() {
if (mframe&&parent.frames.mbarframe.newurl&&parent.frames.mbarframe.newurl!=unescape(location.href))
{parent.frames.mbarframe.newurl=unescape(location.href); parent.frames.mbarframe.load()}
}

//-->
</script>
</head>
<body onload="marr()">
<div><br>&nbsp;&nbsp;&nbsp;<a href="page2.htm">forward</a></div>
</body>
</html>



===============================================
<!--          Main Frame: page2.htm         -->
===============================================


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Template Page2</title>
<script type="text/javascript">
<!--

var w3cdom=(document.getElementById&&document.childNodes&&document.createElement);
var mframe=(parent.frames.mbarframe)?true:false;

if (w3cdom) {parent.document.title=document.title} // show current page title in the title bar
if (mframe) {document.ondragstart=new Function("return false")} // prevent dragging of links

function marr() {
if (mframe&&parent.frames.mbarframe.newurl!=unescape(location.href))
{parent.frames.mbarframe.newurl=unescape(location.href); parent.frames.mbarframe.load()}
}

//-->
</script>
</head>
<body onload="marr()">
<div><br>&nbsp;&nbsp;&nbsp;<a href="page1.htm">back</a></div>
</body>
</html>



===============================================
<!--       Navigation Frame: mbar.htm       -->
===============================================


<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Message Bar</title>
<style type="text/css">
<!--
html, body {
  font-family: Tahoma, "MS Sans Serif", sans-serif;
  font-size: 13px;
  color: #FFFFFF;
}
body {
  background-color: #005252;
  background-image: url("backgrd2.gif");
}
.linkbuttons a {
  display: block;
  height: 23px;
  width: 12px;
}
#mbardiv {
  position: absolute;
  left: 10px;
  top: 3px;
  visibility: visible;
  overflow: hidden;
  width: 75%;
  height: 18px;
  z-index: 3;
}
#mbarbtn {
  position: absolute;
  right: 5px;
  top: 0px;
  visibility: visible;
  overflow: hidden;
  height: 23px;
  z-index: 2;
}
-->
</style>
<script type="text/javascript">
<!--

// preload function
var preloads=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
preloads[i]=new Image()
preloads[i].src=preloadimages.arguments[i]
}
}
// navigation buttons - normal, disabled and down states
// normal back - mbarb.gif
// normal forward - mbarp.gif
// disabled back - mbarb_d.gif
// disabled forward - mbarp_d.gif
// down back - mbarb_o.gif
// down forward - mbarp_o.gif
preloadimages("mbarb_o.gif","mbarp_o.gif","mbarb_d.gif","mbarp_d.gif","mbarb.gif","mbarp.gif","backgrd2.gif")

// CSS Swap Buttons
function changeImages(condition) {
var cI=changeImages.arguments; if (condition) {for (var i=1; i<cI.length; i+=2) {
document.getElementById(cI[i]).style.backgroundImage="url("+"mbar"+cI[i+1]+")"}}
}

document.ondragstart=new Function("return false") // links can be dragged across frames otherwise

function clearMess(condition) {if (condition) {if (mbardiv.innerHTML != '') {mbardiv.innerHTML = ''}}}

function mbar(condition) {if (condition) mbardiv.innerHTML = condition}

function getIndexPath(fullPath)
{
var lastSlash = fullPath.lastIndexOf("/")
var indexPath = unescape(fullPath.substring(0,lastSlash+1))
return indexPath
}

var page0Path=getIndexPath(parent.frames['mainframe'].location.href)+'load.htm';
var page1Path=getIndexPath(parent.frames['mainframe'].location.href)+'page1.htm';
var newurl=page1Path,l;
var hpos=0;
var htop=72; // max length of history
var hlen=htop-2;
var nxt=false;
var history=new Array(htop);
var cnd = new Array();

function init() {
history[0]=page0Path // first page in history array
history[1]=page1Path // second page
hpos++
cnd[0] = history[(hpos+hlen)%htop]
changeImages(1,'b','b.gif')
changeImages(1,'p','p_d.gif')
}
function back()
{
if (history[(hpos+hlen)%htop]) {hpos+=hlen; hpos%=htop;
if (history[hpos]!=page0Path)
parent.frames['mainframe'].location.href=history[hpos]
else
top.location.href=history[hpos]
nxt=true}
}
function forward()
{
l=history[hpos]
if (l) {parent.frames['mainframe'].location.href=l;
nxt=true}
}
// important! load() gets called from outside the frame whenever new pages load
function load()
{
l=newurl;
if (!nxt) {history[(hpos+3+hlen)%htop]=false}
cnd[0] = history[(hpos+1+hlen)%htop]
cnd[1] = history[(hpos+3+hlen)%htop]
changes(!cnd[0],'b');changes(!cnd[1],'p')
cursty(cnd[0],'b2');cursty(cnd[1],'p2')
clearMess(!cnd[0]||!cnd[1])
history[hpos]=l
hpos++
hpos%=htop
cnd[0] = history[(hpos+hlen)%htop]
cnd[1] = history[hpos]
nxt=false
}

// Rollover Image
function changes(condition,image) {(condition) ?
changeImages(1,image,image+'_d.gif'):changeImages(1,image,image+'.gif')
}

// Cursor Style
function cursty(condition,imgName) {
with (document.getElementById(imgName).style) {
if (condition) {if (cursor!="auto") cursor="auto"}
else {if (cursor!="default") cursor="default"}}
}

//-->
</script>
</head>
<body>
<div id="mbardiv"></div>
<div id="mbarbtn" style="text-align:right">
<table cellpadding="0" cellspacing="0" style="width:64px">
 <tr>
  <td><div id="b" class="linkbuttons"><a href="javascript:void(0)" onfocus="this.blur()"
   onmousedown="changeImages(cnd[0],'b','b_o.gif'); mbar(cnd[0])"
   onmouseout="changes(!cnd[0],'b'); clearMess(1)"
   onclick="back(); return false" id="b2"></a></div></td>
  <td style="width:20px"></td>
  <td><div id="p" class="linkbuttons"><a href="javascript:void(0)" onfocus="this.blur()"
   onmousedown="changeImages(cnd[1],'p','p_o.gif'); mbar(cnd[1])"
   onmouseout="changes(!cnd[1],'p'); clearMess(1)"
   onclick="forward(); return false" id="p2"></a></div></td>
  <td style="width:20px"></td>
 </tr>
</table>
</div>
<script type="text/javascript">
<!--
init()
load()
//-->
</script>
</body>
</html>