android4.4 webview调用javascript出现Uncaught ReferenceError: is not define或者has no method

这几天用Nexus5 4.4.4系统做一个简单的手机设备号获取,然后调用javascript显示在网页里的功能,以前做过n多类似的程序,结果程序一运行啥问题都出来了,呵呵

[INFO:CONSOLE(1)] "Uncaught ReferenceError: is not define

 I/chromium(490): [INFO:CONSOLE(1)] "Uncaught SyntaxError: Unexpected token ILLEG

 [Android] Web Console: Uncaught TypeError: Object [object Object] has no method 'xxx'


总结来看就是上述问题,先看代码吧


demo.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>


      <script>
      
      function getDeviceID(info){

		alert("设备号:"+info);    	
      	//document.write("设备号:"+info);
      	return "good.";
    	
      }
     
      </script>
        <body>       
            <a href="http://www.baidu.com" target="_blank">       
				href="http://www.baidu.com" 打开baidu      
            </a>     
            
            <br/>
             <br/>
              
            
           <a href="http://www.baidu.com/closeappwin" target="_blank">       
				href="http://www.baidu.com/closeappwin" 关闭浏览器closeappwin      
           </a>   
           
             <br/>
             <br/>
           
           
           <a href="new://www.sohu.com/" target="_blank">       
				href="new://www.sohu.com/"  在当前浏览器打开一个子浏览器new subwindow      
           </a>  
           
             <br/>
             <br/>
             
           
        </body>       
</html> 



看看我的android 代码如下:

	private void loadUrl(){
		String key="";
		String androidID="";
		try{
			androidID = Secure.getString(getContentResolver(),Secure.ANDROID_ID);
			Log.d(TAG, "androidID:"+androidID);

		}catch(Exception e){
			Log.e(TAG, "");
		}finally{
			String script=String.format("javascript:getDeviceID('"+androidID+"')");
			
			mWebview.evaluateJavascript(script, new ValueCallback<String>() {

				  @Override
				  public void onReceiveValue(String value) {
				      Log.d(TAG, "onReceiveValue value=" + value);
				      
				      if(value!=null){
				    	  flag_get_deviceid=true;
				      }
				  }});
			//mWebview.loadUrl("javascript:getDeviceID('maomao')");

		}
	}

当loadUrl方法在activity的oncreate方法里,mWebview.loadUrl("file:///android_asset/demo.html"); 执行之后调用loadUrl();

基本上就出现上面的错误了,我想是不是4.4的系统在写法上跟低版本不一样,还是用了2种调用方式:

mWebview.evaluateJavascript
mWebview.loadUrl("javascript:getDeviceID('maomao')");

那最后的判断就是一种可能: 调用getDeviceID 方法的时候,js没有加载完毕。

解决办法

	private class WebViewClientDemo extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			Log.d(TAG, " url:"+url);
			
			
			view.loadUrl(url);// 当打开新链接时,使用当前的 WebView,不会使用系统其他浏览器
			return true;
		}
		
		@Override
		  public void onPageFinished(WebView view, String url) {
		      super.onPageFinished(view, url);
		      //在这里执行你想调用的js函数
		      if(!flag_get_deviceid){
		    	  loadUrl();
		      }
		  }
	}

我们在 onPageFinished的时候,全部的js肯定都加载完毕了,这时候再执行loadUrl方法,就可以啦。


最后顺便提一下 webview.evaluateJavascript的好处,这个方法,可以把js函数的return结果获取到:

mWebview.evaluateJavascript(script, new ValueCallback<String>() {

				  @Override
				  public void onReceiveValue(String value) {
				      Log.d(TAG, "onReceiveValue value=" + value);
				      
				      if(value!=null){
				    	  flag_get_deviceid=true;
				      }
				  }});


  • 加入优快云技术群:221057495 与我交流

<think>好的,用户遇到了一个关于WebView桥接的未定义错误:Uncaught ReferenceError: printCallBack is not defined。首先,我需要理解这个错误的常见原因。通常,这种情况发生在WebViewJavaScript和原生代码之间的通信中,尤其是回调函数没有被正确注册或调用时机不对。 接下来,我应该考虑用户可能的场景。用户可能是在Android或iOS应用中使用WebView,通过桥接机制让网页调用原生功能。例如,网页中调用了printCallBack,但原生端没有注册这个回调函数,导致JavaScript找不到该函数而报错。 然后,我需要分析可能的原因。首先,检查原生代码是否注册了名为printCallBack的接口。如果原生代码中没有相应的实现,JavaScript调用时自然会出错。其次,检查调用时机是否正确,可能在网页加载完成之前就调用了该函数,导致未定义。另外,跨平台差异也需要考虑,比如Android的addJavascriptInterface和iOS的WKScriptMessageHandler的不同处理方式。 接下来,我应该提供解决方案。第一步建议用户检查原生代码中的桥接注册,确保名称一致。第二步确保在网页加载完成后调用回调,使用WebView的加载完成事件。第三步检查JavaScript注入是否正确,特别是iOS可能需要手动注入到WKUserContentController。第四步注意平台差异,比如Android的方法需要注解,而iOS需要消息处理。最后,建议添加错误处理,如try-catch或日志输出,帮助调试。 最后,需要验证这些步骤是否覆盖了常见问题,并且用用户容易理解的语言表达,避免使用过于专业的术语,同时保持结构清晰,分点说明。可能用户是开发者,但可能对桥接机制不熟悉,所以需要详细解释每一步的操作和原因。</think>关于 WebView 桥接中出现的 `Uncaught ReferenceError: printCallBack is not defined` 错误,这是典型的 JavaScript 与原生代码通信时的常见问题。以下是逐步分析和解决方案: --- ### **问题原因分析** 1. **回调未注册** - 原生端(Android/iOS)未正确注册名为 `printCallBack` 的 JavaScript 接口 - JavaScript 试图调用未暴露给 WebView 的原生方法 2. **调用时机错误** - 在 WebView 页面未完全加载完成时,提前调用了回调函数 - 原生代码注入 JavaScript 接口的时机晚于页面执行 3. **跨平台差异** - Android 的 `addJavascriptInterface` 与 iOS 的 `WKScriptMessageHandler` 机制不同步 - WebView 安全策略限制(如 Android API 17+ 的 `@JavascriptInterface` 注解要求) --- ### **解决方案步骤** #### 1. 检查原生端桥接注册 ```java // Android 示例(Kotlin) webView.addJavascriptInterface(object { @JavascriptInterface fun printCallBack(message: String) { Log.d("Bridge", "Received: $message") } }, "AndroidBridge") // 注意此处暴露的对象名 ``` ```swift // iOS 示例(Swift WKWebView) let contentController = webView.configuration.userContentController contentController.add(self, name: "printCallBack") ``` #### 2. 确保调用时机正确 ```javascript // 在页面完全加载后调用 window.onload = function() { // Android 调用方式 AndroidBridge.printCallBack("Hello from Web"); // iOS 调用方式 window.webkit.messageHandlers.printCallBack.postMessage("Hello from Web"); }; ``` #### 3. 检查 JavaScript 注入 ```java // Android 确保启用 JavaScript webView.settings.javaScriptEnabled = true // iOS 需要显式注入到 WKUserContentController // 通过 evaluateJavaScript 主动注入方法 ``` #### 4. 跨平台兼容处理 ```javascript // 统一调用入口 function nativeCall(message) { if (window.AndroidBridge) { // Android AndroidBridge.printCallBack(message); } else if (window.webkit) { // iOS window.webkit.messageHandlers.printCallBack.postMessage(message); } else { console.error("Bridge not available"); } } ``` #### 5. 错误调试技巧 ```javascript // 添加 try-catch 块定位问题 try { printCallBack("test"); } catch (error) { console.error("Bridge Error:", error); alert("请更新APP版本以支持此功能"); } ``` --- ### **常见踩坑点** 1. **Android 接口名大小写敏感** ```java // Java 暴露的接口名必须与 JS 调用严格一致 addJavascriptInterface(obj, "AndroidBridge"); // JS 必须使用 AndroidBridge.xxx() ``` 2. **iOS 的异步通信机制** ```swift // 需要实现 WKScriptMessageHandler func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "printCallBack" { print(message.body) } } ``` 3. **安全协议限制** - 确保 WebView 加载的页面使用 `https` 或通过 `file://` 加载本地页面时正确配置 `WebSettings.setAllowFileAccess` --- 通过以上步骤检查桥接注册、调用时序和跨平台差异,可解决 90% 的 "undefined callback" 问题。如果问题依旧,建议在 Chrome DevTools 远程调试 WebViewAndroid)或 Safari 调试 iOS WebView 以查看完整调用栈。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风口猪炒股指标

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值