在JS代码运行中出现“Uncaught SyntaxError: Invalid or unexpected token at....”错误处理

本文深入解析JavaScript中常见的“Uncaught SyntaxError”错误,通过具体代码示例,详细讲解如何定位和修复由不正确的符号引发的问题。

“Uncaught SyntaxError: Invalid or unexpected token at....”,该类错误出现时首先检查代码是否出现错误,若JS代码没有错误,就检查(),{},<,>,;这些符号是否出错了。

function Person(){
}
var dom=Person.prototype;
console.log(dom);
Person.prototype.name="Yingleiming";
Person.prototype.age=28;
Person.prototype.job="Software Engineer";//此处错误的使用了中文符号
Person.prototype.sayName=function(){
    alert(this.name);
};
console.log(dom);

 

转载于:https://www.cnblogs.com/yingleiming/p/7654674.html

<think>根据错误信息,存在两个问题: 1. "Script error. 0 0 null":这通常是由于跨域脚本执行导致的,但因为我们注入的是本地脚本,所以可能是语法错误引起的。 2. "Uncaught SyntaxError: Invalid or unexpected token":表明在注入的JS代码中存在语法错误。 原因分析: 我们之前对JS文件进行了注释清除,但可能破坏了原始代码结构。例如: - 原始代码中的正则表达式字面量(如`/\\/`)可能被错误地修改 - 删除注释时可能删除了必要的换行符,导致语句合并出错 解决方案: 1. 避免修改原始JS文件内容:不再清除注释,因为注释在JS执行中无害。 2. 使用更安全的注入方式:直接加载原始JS文件,不进行任何修改。 3. 使用`loadUrl("javascript:...")`代替`evaluateJavascript`,因为前者更兼容。 修改后的代码: ```java public static void webViewLoadLocalJs(WebView view, String path) { view.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView webView, String url) { super.onPageFinished(webView, url); injectJsBridge(webView, path); } }); } private static void injectJsBridge(WebView view, String path) { String jsContent = assetFile2Str(view.getContext(), path); if (jsContent != null) { // 使用loadUrl注入,避免语法解析问题 view.loadUrl("javascript:(function() {" + jsContent + "})()"); } } public static String assetFile2Str(Context c, String urlStr) { // 不再删除注释,直接返回原始内容 try (InputStream in = c.getAssets().open(urlStr); BufferedReader reader = new BufferedReader(new InputStreamReader(in))) { StringBuilder sb = new StringBuilder(); String line; while ((line = reader.readLine()) != null) { sb.append(line).append("\n"); } return sb.toString(); } catch (Exception e) { Log.e("JSBridge", "读取JS文件错误", e); } return null; } ``` 为什么这样修改? 1. 注释不会影响JS执行,保留原始代码确保语法正确。 2. `loadUrl`方式注入是WebView标准做法,兼容性更好。 3. 用立即执行函数包裹代码,避免污染全局作用域。 如果仍出现语法错误,请检查原始JS文件: - 确保文件没有损坏 - 检查特殊字符(如UTF-8 BOM头)可能导致语法错误 验证方法: 在WebChromeClient中重写onConsoleMessage,捕获详细错误: ```java webView.setWebChromeClient(new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage cm) { Log.d("WebViewConsole", cm.message() + " -- From line " + cm.lineNumber() + " of " + cm.sourceId()); return true; } }); ``` 根据错误行号定位问题。 如果问题依旧,考虑使用原始注入方法(不删除注释,不修改内容)并确保文件读取正确。 注意:`loadUrl`注入的代码不会返回结果,因此不需要回调。但可以通过在JS中调用一个自定义的全局函数来通知注入成功。 例如,在JS文件末尾添加: ```js if (window.JSBridgeInjected) { window.JSBridgeInjected(); } ``` 然后在Java中注册一个同名函数进行监听。 另一种方案:使用`evaluateJavascript`但不对JS内容做任何修改(包括注释),直接执行原始JS字符串,不包裹返回值逻辑(因为原始JS文件最后返回了字符串'Injected')。 修改`injectJsBridge`方法: ```java private static void injectJsBridge(WebView view, String path) { String jsContent = assetFile2Str(view.getContext(), path); if (jsContent != null) { // 直接执行原始JS,并捕获返回值 view.evaluateJavascript(jsContent, new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Log.d("JSBridge", "注入结果: " + value); } }); } } ``` 这样,如果原始JS文件最后有`return 'Injected';`,那么回调中就会收到这个字符串。 但是,原始JS文件是一个立即执行函数表达式(IIFE),并且返回了字符串'Injected',所以使用`evaluateJavascript`应该能正确捕获返回值。 请尝试这两种方法中的一种,并观察控制台输出。 由于之前遇到语法错误,建议先确保JS文件内容正确。可以使用在线JS验证工具检查处理后的JS内容。 最后,如果问题仍然存在,请提供原始JS文件的下载链接或内容片段(注意敏感信息),以便进一步分析。 相关问题: §§相关问题§§: 1. 如何在Android WebView中捕获JavaScript错误和console日志? 2. WebView的`evaluateJavascript`和`loadUrl("javascript:...")`两种注入方式有何区别? 3. 如何确保WebView注入的JavaScript代码在页面加载完成后执行? 4. 在WebView中,如何处理JavaScript与Native通信的安全性问题?</think>### 解决WebView注入JS时的语法错误问题 根据控制台报错信息:"Uncaught SyntaxError: Invalid or unexpected token",这表明注入的JavaScript代码存在语法错误。主要原因是注释删除逻辑不够完善,导致删除了必要的语法元素(如正则表达式字面量),或者破坏了代码结构。 以下是完全修正的解决方案: ```java // 优化后的JS注入方法 public static void injectJsBridge(WebView webView, String jsPath) { webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); loadJsBridge(view, jsPath); } }); } private static void loadJsBridge(WebView view, String path) { String jsContent = readJsAsset(view.getContext(), path); if (jsContent != null) { // 安全执行JS的封装 String safeJs = "try {" + jsContent + "} catch(e) {" + "console.error('JS注入错误:', e);" + "}"; // 使用evaluateJavascript执行 view.evaluateJavascript(safeJs, new ValueCallback<String>() { @Override public void onReceiveValue(String value) { if (value != null && !value.equals("null")) { Log.d("JSBridge", "注入成功,返回值: " + value); } else { Log.e("JSBridge", "注入失败"); } } }); } } // 安全读取JS文件(保留原始内容) public static String readJsAsset(Context context, String assetPath) { try (InputStream in = context.getAssets().open(assetPath); BufferedReader reader = new BufferedReader(new InputStreamReader(in))) { StringBuilder sb = new StringBuilder(); String line; while ((line = reader.readLine()) != null) { // 不再删除任何内容,保持原始JS结构 sb.append(line).append("\n"); } return sb.toString(); } catch (Exception e) { Log.e("JSBridge", "读取JS资源错误", e); return null; } } // 配置WebView捕获控制台错误 webView.setWebChromeClient(new WebChromeClient() { @Override public boolean onConsoleMessage(ConsoleMessage consoleMessage) { Log.d("WebViewConsole", "消息: " + consoleMessage.message() + "\n行号: " + consoleMessage.lineNumber() + "\n来源: " + consoleMessage.sourceId()); return true; } }); ``` ### 关键修改点说明: 1. **取消注释删除逻辑**: - 完全保留JS文件原始内容,不再尝试删除注释 - 注释在JS执行中无害,删除反而容易破坏代码结构 2. **添加错误捕获机制**: ```javascript try { // 原始JS代码 } catch(e) { console.error('JS注入错误:', e); } ``` - 防止语法错误导致整个JS执行中断 - 通过console.error输出详细错误信息 3. **增强控制台日志捕获**: - 实现`onConsoleMessage`完整捕获日志信息 - 输出错误发生的具体行号和来源文件 4. **保持注入时机不变**: - 仍在`onPageFinished`中执行确保DOM就绪 - 使用`evaluateJavascript`保持现代API优势 ### 常见语法错误原因分析: 1. **正则表达式被破坏**: ```javascript // 原始代码 var pattern = /\\/; // 匹配反斜杠 // 错误处理后会变成: var pattern = ; // 匹配反斜杠 ``` 解决方案:保留注释就不会破坏正则字面量 2. **模板字符串被截断**: ```javascript // 原始代码 var url = `${scheme}://${path}`; // 错误处理可能删除$符号 var url = `{scheme}://{path}`; ``` 3. **ASI(自动分号插入)失效**: ```javascript // 原始代码 return { result: 'success' }; // 删除注释后可能变成: return { result: 'success' }; ``` 实际解析为:`return; { result: 'success' };` ### 验证方法: 1. 检查控制台输出: ```bash D/WebViewConsole: 消息: JS注入错误:SyntaxError: Invalid or unexpected token 行号: 123 来源: file:///android_asset/bridge.js ``` 2. 使用Chrome远程调试: ```java // 启用WebView调试 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } ``` 在Chrome中访问`chrome://inspect`可调试WebView内容 3. 直接输出JS内容验证: ```java Log.d("JSContent", readJsAsset(context, "bridge.js")); ``` ### 备选方案:使用loadUrl方法 如果问题仍然存在,可回退到传统方法: ```java view.loadUrl("javascript:(function() {" + jsContent + "})()"); ``` --- ### 相关问题
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值