本地WebView从JSON提取内容的JS实现及报错排查咨询

错误原因拆解 #

• require is not defined：浏览器/WebView属于前端环境，不支持Node.js的require和fs模块——这些是Node.js后端专属的文件操作API，前端环境里根本不存在。
• CORS错误+onLoad is not defined：给script标签加type="module"后，脚本会变成ES模块，模块内的函数默认不会挂载到全局作用域，所以HTML里的onload="onLoad()"找不到对应的函数；同时本地file://协议下，浏览器会限制模块加载，触发跨域拦截。
• ReadFileSync is not defined：ReadFileSync是Node.jsfs模块的方法，前端环境没有这个API，而且原代码里的写法也错了，正确的Node.js写法是fs.readFileSync（小写开头）。

可行解决方案 #

方案1：用Fetch API读取本地JSON #

如果你的WebView允许file://协议发起请求，可以用浏览器原生的Fetch API读取JSON文件，替代Node.js的fs模块：

修正后的HTML：

<html>
   <body scroll="no">
   </body>
   <script src="main.js"></script>
</html>

对应的main.js代码：

const JSON_FILE = "data.json";

// 异步读取JSON文件
async function loadData() {
    try {
        // 发起请求获取JSON文件
        const response = await fetch(JSON_FILE);
        if (!response.ok) {
            throw new Error(`请求失败，状态码：${response.status}`);
        }
        // 解析JSON数据
        const allStrings = await response.json();
        
        // 这里可以自定义数据展示逻辑，示例是把数据格式化显示在页面上
        console.log("读取到的JSON数据：", allStrings);
        document.body.innerHTML = `<pre>${JSON.stringify(allStrings, null, 2)}</pre>`;
    } catch (err) {
        console.error("读取文件出错：", err);
        document.body.innerHTML = `<p>数据读取失败：${err.message}</p>`;
    }
}

// 页面加载完成后自动执行读取逻辑
window.addEventListener('load', loadData);

方案2：直接嵌入JSON数据（适用于静态数据） #

如果JSON内容不需要动态更新，直接把JSON内容写进JS文件里，完全避免文件读取操作：

main.js代码：

// 直接把data.json里的内容复制到这里
const allStrings = {
    "示例键1": "示例值1",
    "示例键2": ["子项1", "子项2"]
};

function renderData() {
    console.log("JSON数据：", allStrings);
    // 把数据展示到页面上
    document.body.innerHTML = `<pre>${JSON.stringify(allStrings, null, 2)}</pre>`;
}

// 页面加载完成后渲染数据
window.addEventListener('load', renderData);

方案3：原生App桥接（适用于嵌入原生应用的WebView） #

如果你的WebView是嵌入在Android/iOS原生App里，最可靠的方式是让原生代码读取本地JSON文件，再通过JS桥接把数据传递给WebView里的JS代码——这种方式不受浏览器的跨域和API限制。

关键语法修正 #

原代码里的函数定义有语法错误：

• 错误写法：function loadData {
• 正确写法：function loadData() {
  必须加上括号，否则函数无法被正确定义和调用。

内容的提问来源于stack exchange，提问作者Hiep Le Thanh