如何在HTA的div中展示HTML内容并实现向log.html写入消息功能

问题1：运行时报错'Display'未定义 #

• 错误原因：setInterval传入字符串调用VBScript子程序时，HTA的IE9渲染模式无法正确识别VBScript上下文，同时代码中strPath路径写死，容易出现路径不存在读取失败的问题。
• 修复方案：
  1. 将setInterval的入参改为GetRef("Display")绑定VBScript子程序引用
  2. 替换固定路径为自动获取当前用户桌面路径的逻辑，同时新增目录、文件自动创建逻辑，避免路径不存在报错

问题2：textarea组件样式异常 #

• 错误原因：IE9内核不支持原生placeholder属性，同时外部CSS与行内样式存在冲突，默认盒模型计算规则与现代浏览器不一致。
• 修复方案：
  1. 给textarea添加box-sizing: border-box属性，统一宽高计算规则
  2. 用VBScript实现模拟placeholder效果，兼容IE9内核
  3. 明确指定textarea的边框、内边距、字体样式，避免默认样式错乱

问题3：定时刷新失效、消息写入log.html功能无法实现 #

• 错误原因：定时刷新失效本质和问题1的调用方式错误有关；网页版的写入逻辑依赖后端服务，HTA可直接通过FileSystemObject实现本地文件写入，同时需要阻止表单提交的默认刷新行为。
• 修复方案：
  1. 修复setInterval调用逻辑后定时刷新即可正常运行
  2. 新增表单提交事件处理逻辑，阻止默认刷新行为，通过FileSystemObject的追加写入模式实现消息写入log.html
  3. 写入完成后清空输入框内容

修复后完整代码 #

<!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">
        Dim strPath
        Sub window_OnLoad
            Window.ResizeTo 680,723
            ' 自动获取桌面路径，避免固定用户名路径错误
            Set wshShell = CreateObject("WScript.Shell")
            strPath = wshShell.SpecialFolders("Desktop") & "\Chat App\"
            ' 自动创建不存在的目录
            Set objFSO = CreateObject("Scripting.FileSystemObject")
            If Not objFSO.FolderExists(strPath) Then
                objFSO.CreateFolder(strPath)
            End If
            ' 自动创建不存在的log.html
            If Not objFSO.FileExists(strPath & "log.html") Then
                Set objFile = objFSO.CreateTextFile(strPath & "log.html", True)
                objFile.Close
            End If
            ' 用GetRef绑定函数引用，解决找不到Display的问题
            iTimerID = window.setInterval(GetRef("Display"), 1000)
            ' 初始化输入框placeholder
            If usermsg.Value = "" Then
                usermsg.Value = "Type your message here..."
                usermsg.style.color = "#999"
            End If
        End Sub
        
        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

        ' 输入框焦点事件，处理placeholder
        Sub usermsg_OnFocus
            If usermsg.Value = "Type your message here..." Then
                usermsg.Value = ""
                usermsg.style.color = "#000"
            End If
        End Sub

        Sub usermsg_OnBlur
            If usermsg.Value = "" Then
                usermsg.Value = "Type your message here..."
                usermsg.style.color = "#999"
            End If
        End Sub

        ' 表单提交处理，写入消息
        Sub submitmsg_OnClick
            ' 阻止表单默认提交刷新
            message.returnValue = False
            msg = Trim(usermsg.Value)
            If msg = "" Or msg = "Type your message here..." Then
                Exit Sub
            End If
            ' 组装消息格式，可自行调整样式
            sendMsg = "<p><b>我：</b>" & Replace(msg, vbCrLf, "<br>") & "</p>" & vbCrLf
            ' 追加写入log.html
            Set objFSO = CreateObject("Scripting.FileSystemObject")
            Set objFile = objFSO.OpenTextFile(strPath & "log.html", 8, True)
            objFile.WriteLine sendMsg
            objFile.Close
            ' 清空输入框
            usermsg.Value = ""
            usermsg_OnBlur
        End Sub
    </script>
    <style>
        /* 修复textarea样式 */
        #usermsg {
            box-sizing: border-box;
            width: calc(100% - 40px);
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
            resize: none;
            margin: 0 20px;
        }
        #chatbox {
            height: 380px;
            overflow-y: auto;
            background: #fff;
            padding: 15px;
            margin: 0 20px 20px 20px;
            border-radius: 4px;
        }
        #submitmsg {
            float: right;
            margin: 10px 20px 0 0;
            padding: 8px 20px;
            cursor: pointer;
        }
    </style>
</head>

<body style="background-color:grey;margin:0;padding:0;">
    <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"></textarea>
            <input name="submitmsg" type="submit" id="submitmsg" value="Send" />
        </form>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者NewBieKid