HTML无法访问外部JavaScript文件变量的原因及解决方法

为什么alert无法显示ans？ #

核心有两个问题：

• 浏览器不支持Node.js专属API：你的test.js里用了require('child_process')，这是Node.js独有的模块，浏览器环境没有这个接口，直接打开ui.html时这行代码会报错，导致后续异步函数无法执行，ans根本不会被赋值。
• 异步代码时序错误：就算忽略Node.js API的问题，myasyncfuntion是异步函数，await会让ans的赋值操作延后，但ui.html里的脚本会在页面加载时立即执行，此时ans还没被赋值，拿到的只是初始的undefined。

解决办法 #

方案1：基于Electron等支持Node.js的桌面应用场景 #

如果你的代码是在Electron这类同时支持浏览器和Node.js的框架中运行，只需调整代码执行时机，确保ans赋值完成后再触发alert：
修改test.js，通过自定义事件通知页面结果已就绪：

var ans;

function execShellCommand(cmd) {
    const exec = require('child_process').exec;
    return new Promise((resolve, reject) => {
        exec(cmd, (error, stdout, stderr) => {
            if (error) {
                console.warn(error);
            }
            resolve(stdout ? stdout : stderr);
        });
    });
}

async function myasyncfuntion() {
    ans = await execShellCommand('sh diffcheck.sh');
    console.log(ans);
    // 触发自定义事件，传递ans的值
    window.dispatchEvent(new CustomEvent('ansReady', { detail: ans }));
}

myasyncfuntion();

修改ui.html，监听事件后再执行alert：

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="test.js"></script>
</head>
<script>
    // 监听ans准备完成的事件
    window.addEventListener('ansReady', (event) => {
        const diffString = event.detail;
        alert(diffString);
    });
</script>
</html>

方案2：纯浏览器环境 #

浏览器无法直接执行shell命令，需要把执行脚本的逻辑放到后端，前端通过网络请求获取结果：

1. 编写后端服务server.js：

const express = require('express');
const { exec } = require('child_process');
const app = express();
const port = 3000;

// 提供获取diff结果的接口
app.get('/getDiff', (req, res) => {
    exec('sh diffcheck.sh', (error, stdout, stderr) => {
        if (error) {
            console.warn(error);
            res.send(stderr);
            return;
        }
        res.send(stdout);
    });
});

// 允许访问静态文件（比如ui.html）
app.use(express.static('.'));

app.listen(port, () => {
    console.log(`服务运行在 http://localhost:${port}`);
});

2. 安装依赖：npm install express
3. 修改ui.html，通过fetch请求后端接口：

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
</head>
<script>
    async function fetchDiff() {
        try {
            const response = await fetch('/getDiff');
            const diffString = await response.text();
            alert(diffString);
        } catch (err) {
            console.error(err);
            alert('获取结果失败');
        }
    }
    fetchDiff();
</script>
</html>

4. 启动服务：node server.js，然后在浏览器打开http://localhost:3000/ui.html

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