How to display html content in a div and add a content the html file in HTA

Admin 1
Viewed 183

I successfully create a simple web-based chat app by simply following this tutorial

The only difference is I did not include the login thing. It only keeps making post messages in log.html.

Now I'm trying to do this in HTA. And it is my first time to use it. I'm still learning, and currently to this :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=9" />
        <meta charset="utf-8" />
        <title>Chat-App</title>
        <meta name="description" content="Chat-App" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="font-awesome-animation.min.css"/>
        <link rel="stylesheet" href="styles.css" />
        
    <HTA:APPLICATION 
         SCROLL="auto"
         SINGLEINSTANCE="yes"
         WINDOWSTATE="normal"/>
     <script language="VBScript">
            Sub window_OnLoad
             Window.ResizeTo 680,723
              iTimerID = window.setInterval("Display", 1000)
            End Sub
            
                strPath = "C:\Users\username\Desktop\Chat App\"
                Set wshShell = CreateObject( "WScript.Shell" )
                'strSender = wshShell.ExpandEnvironmentStrings( "%USERNAME%" )
            
            Sub Display
                Set objFSO = CreateObject("Scripting.FileSystemObject")
            
            Set objFile = objFSO.OpenTextFile(StrPath & "log.html", 1)
             strCharacters = objFile.ReadAll
            
            
             objFile.Close
             chatbox.innerHTML = strCharacters
             chatbox.ScrollTop = chatbox.ScrollHeight
            
            End Sub
        </script>
    </head>
    
    <body style="background-color:grey;">
        <div id="wrapper">
            <h1 style="margin-top: 5px;margin-left:20px;color:orange;">Chat-App</h1>

            <div id="chatbox" name="chatbox" class="textbox">
            </div>
 
            <form name="message" action="">
                <textarea rows="10" cols="30" name="usermsg" type="text" id="usermsg" style="height:200px;" placeholder="Type your message here..."></textarea>
                <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
            </form>
        </div>
  </body>
</html>

this is the output ..ChatApp

This only get the content of log.html then display in chatbox div. But it has an error saying 'Display' is not defined. And textarea doesn't even look like a textarea.

Other than that I don't know how to achieve the posting messages in log.html and refresh it every set seconds like in the tutorial. I tried pasting the javascript that works in web based but it doesn't work when I convert it to hta. Can someone help me to do it in HTA ?

hta jscript vbscript html
2 Answers

The Official Documentation has the answer

Syntax

retVal = object.setInterval(expression, msec, language);

Parameters

  • expression [in] Type: VARIANT

    Pointer to a VARIANT that specifies a function pointer or string that indicates the code to be executed when the specified interval has elapsed.

  • msec [in] Type: long

    long that specifies the number of milliseconds.

  • language [in, optional] Type: VARIANT

    Pointer to a BSTR that specifies any one of the possible values for the IHTMLElement::language attribute.

The important parameter here is language as it tells setInterval() to that the expression is written in the specific language (JScript, VBScript etc.).

Change the line:

iTimerID = window.setInterval("Display", 1000)

to:

iTimerID = window.setInterval("Display", 1000, "VBScript")
user_6929420

Here's a simple HTA chat box app that you can work from to make your own version. You can run multiple copies on the same machine or set the chat log file to a path on a shared drive and run it on multiple computers.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=9">
<hta:application
  id=oHTA
  icon=notepad.exe
  applicationname=ChatBox
  selection=yes
  singleinstance=no
>
<script>    
function Refresh() {
  Iframe = document.getElementById("chatbox").contentWindow;
  window.setInterval(function() {
    fso = new ActiveXObject("Scripting.FileSystemObject");
    fh = fso.OpenTextFile(ChatLog,1,1);
    FileContents = fh.AtEndOfStream ? "" : fh.ReadAll();
    fh.Close();
    Iframe.document.body.innerHTML = FileContents
    if (autoscroll.checked) {Iframe.scrollTo( 0,999999)};
  }, 500);
}
function replaceAll(str, match, replacement){
   return str.split(match).join(replacement);
}
function PostMsg() {
  TrimMsg = replaceAll(msg.value.trim(),'\n','<br>');
  if (TrimMsg.length > 0) {
    fh = fso.OpenTextFile(ChatLog,8);
    UserName = user.value.trim();
    if (UserName=='') {UserName = 'Anonymous'};
    fh.write('<button>' + UserName + '</button><br><div>' + TrimMsg + '</div><br>');
    fh.Close();
  }
}
</script>
<style>
body {background-color:grey}
#chatbox {background-color:white; height:30em; width:30em}
#sb {float:right}
</style>
</head>
<body onload=Refresh()>
  <script>
    document.title = "Chat Box"
    ChatLog = ".\\Chat.txt";
    x = 520;
    y = 680;
    window.resizeTo(x, y);
    window.moveTo((screen.availWidth - x)/2, (screen.availHeight - y)/2);
    </script>
  <iframe id=chatbox title="Chat Box"></iframe><br><br>
  <textarea id=msg rows=4 cols=58></textarea><br><br>
  Screen name:<input type=text id=user>
  Autoscroll:<input type=checkbox checked id=autoscroll>
  <input type=button id=sb value=Send OnClick=PostMsg()>
</body>
</html>
user_157643780
Related