BAT/HTA混合文件：如何在HTML部分转义百分号？

问题说明 #

我正在开发一个Batch/HTA混合文件，希望为应用添加背景音乐。当将包含百分号的URL添加到<bgsound>标签时，音乐无法播放，但使用不含百分号URL的应用可正常运行。尝试添加双百分号让Batch忽略它，但无效果，不清楚如何在HTML部分转义这些字符。

问题根源 #

Batch会将文件中的单个%视为变量标识符，当HTML的URL里出现%20这类URL编码字符时，Batch会尝试解析%2%这个未定义的变量（替换为空），导致URL中的%20被破坏成0，最终音频地址无效。

解决方法 #

方法一：转义Batch中的百分号 #

将URL里的每个%替换成%%，Batch处理时会把%%解析为单个%，HTA就能拿到正确的URL：

<!-- :: Batch section
@echo off
setlocal EnableDelayedExpansion
start "" mshta.exe "%~f0"
exit /b
-->


<html>
<head>
    <HTA:APPLICATION SCROLL="no" SYSMENU="yes" >
    <title>ACNH - Time Travel Date Selection</title>
    <script language="JavaScript">
    window.resizeTo(1280, 720);
    </script>
</head>
<body>

    <div class="wrapper">
        <h1>Testing audio...</h1>
    </div>
    <bgsound src="https://vgmsite.com/soundtracks/animal-crossing-new-horizons-2020-switch-gamerip/pdjxvsymlc/3-02%%20Get%%20Ready%%20for%%20Your%%20Flight%%21.mp3">

</body>
</html>

方法二：用JavaScript动态设置音频源 #

避免直接在HTML标签中写带百分号的URL，改用JavaScript动态赋值，Batch不会解析JS字符串里的百分号：

<!-- :: Batch section
@echo off
setlocal EnableDelayedExpansion
start "" mshta.exe "%~f0"
exit /b
-->


<html>
<head>
    <HTA:APPLICATION SCROLL="no" SYSMENU="yes" >
    <title>ACNH - Time Travel Date Selection</title>
    <script language="JavaScript">
    window.resizeTo(1280, 720);
    window.onload = function() {
        // 创建bgsound元素并设置源
        var bgSound = document.createElement('bgsound');
        bgSound.src = "https://vgmsite.com/soundtracks/animal-crossing-new-horizons-2020-switch-gamerip/pdjxvsymlc/3-02%20Get%20Ready%20for%20Your%20Flight%21.mp3";
        document.body.appendChild(bgSound);
    }
    </script>
</head>
<body>

    <div class="wrapper">
        <h1>Testing audio...</h1>
    </div>

</body>
</html>

进阶：使用HTML5 <audio>标签替代<bgsound>

<bgsound>是IE旧标签，用<audio>兼容性更好、功能更完善：

// 替换上述代码中的window.onload函数
window.onload = function() {
    var audio = document.createElement('audio');
    audio.src = "https://vgmsite.com/soundtracks/animal-crossing-new-horizons-2020-switch-gamerip/pdjxvsymlc/3-02%20Get%20Ready%20for%20Your%20Flight%21.mp3";
    audio.loop = true; // 循环播放
    audio.autoplay = true; // 自动播放
    document.body.appendChild(audio);
}

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