如何解决message事件中JSON.parse抛出的Uncaught SyntaxError错误？

错误根源 #

这个错误的核心原因是你尝试对已经是JavaScript对象的event.data执行JSON.parse——当你对对象调用JSON.parse时，JavaScript会先把对象隐式转为字符串"[object Object]"，这个字符串不符合JSON格式规范，因此抛出语法错误。

解决方案 #

修改代码逻辑，先区分event.data的类型，避免对对象执行解析，同时增加异常处理防止其他无效JSON导致的报错：

if(window.addEventListener){
window.addEventListener("message", myfunction, false);
}else{
window.attachEvent("onmessage", myfunction);
}

function myfunction(event) {
    // 直接排除null、undefined、空字符串等无效数据
    if (!event.data) return;

    let dataJSONLocator;
    if (typeof event.data === 'object') {
        // 数据已经是对象，直接使用无需解析
        dataJSONLocator = event.data;
    } else {
        // 数据是字符串，尝试解析并捕获异常
        try {
            dataJSONLocator = JSON.parse(event.data);
        } catch (parseError) {
            console.warn('无法解析JSON数据:', event.data, parseError);
            return;
        }
    }

    if (typeof dataJSONLocator === 'object' && dataJSONLocator.tntMessage !== undefined) {
        if (dataJSONLocator.tntMessage) {
            console.log(dataJSONLocator);
            document.getElementsByName("address1")[0].value = `${dataJSONLocator.name} ${dataJSONLocator.address}`;
            document.getElementsByName("city")[0].value = dataJSONLocator.city;
            document.getElementsByName("id_state")[0].value = dataJSONLocator.prov;
            document.getElementsByName("postcode")[0].value = dataJSONLocator.cap;
        }
    }
}

关键改动说明 #

• 类型判断优先：先检查event.data是否为对象，直接跳过解析步骤，避免隐式类型转换导致的错误；
• 异常捕获：用try-catch包裹JSON.parse，即使收到非JSON格式的字符串，也不会中断脚本运行，还能输出错误信息方便排查；
• 空值优化：!event.data一次性排除null、undefined、空字符串等无效输入，简化判断逻辑；
• 语法优化：使用模板字符串替代字符串拼接，代码更易读维护。

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