关闭

Android WebView与js交互的问题记录

标签: androidhtmlwebviewjavascriptUncaught
440人阅读 评论(0) 收藏 举报
分类:

记录下昨天项目开发中遇到的关于webView与js交互出现的那点不愉快的小小事

1.细节问题

  • 1.贴上Html代码

    /**index.html*/
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        </head>
        <body>
            <!--Js调用Android代码-->
            <a onClick="window.index.onCallback"></a>   
        </body>
    </html>
    
  • 2.有木有感觉这几句代码中有一个很大的坑

    <a onClick="window.index.onCallback"></a>   
    
    • 就是这一句,刚开始就一直郁闷怎么js调用android代码,为何一直没有任何反应?targetSdkVersion版本的问题以及该注意的细节也都有兼顾到了,终究调用不起来,后来找了朋友帮忙看下,才发觉少了 “()”导致的问题,我也是醉了。要多学习咯

2.js回调的问题

  • 1.由于最近开发的项目主页面组成是FragmentTabHost + ViewPage + Fragment,而其中的fragment中嵌入H5的界面,需求是点击H5界面的一个图标,可以跳转到主页面另一Tab对应的Fragment。

  • 2.解决了上面关于js回调相应的问题,又出现了一问题,贴Android代码

    webView.addJavascriptInterface(new onJSCallAndroid(){
            @JavascriptInterface
            @Override
            public void onCallWorkcircle() {
    
                ((MainActivity)mActivity).mTabHost.setCurrentTab(1);
            }
    
  • 3.现象:点击H5界面的图标,没有跳转到Tab1界面,通过打印log是可以确定此处的代码是执行的,接着点击Tab1,Tab1对应的Fragment出现了白屏,查看异常日志,没有异常信息。接连点击底部的Tab,页面不断切换,Tab1对应的Fragment依然白屏,最后崩溃退出,查看了日志是说空指针异常,明显这不是导致切换不响应和白屏的因素;

  • 4.在调试的过程中,发现了日志中有如下的提醒信息(并非error级别),真是惊醒梦中人

    android.view.ViewRootImpl$CalledFromWrongThreadException: 
    Only the original thread that created a view hierarchy can touch its views.
    08-27 18:44:02.412 3346-3557/com.hy.binbin W/System.err:     at android.view.ViewRootImpl.checkThread(ViewRootImpl.java:6795)
    08-27 18:44:02.412 3346-3557/com.hy.binbin W/System.err:     at android.view.ViewRootImpl.requestLayout(ViewRootImpl.java:938)
    08-27 18:44:02.412 3346-3557/com.hy.binbin W/System.err:     at android.view.View.requestLayout(View.java:18864)
    08-27 18:44:02.412 3346-3557/com.hy.binbin W/System.err:     at android.view.View.requestLayout(View.java:18864)
    08-27 18:44:02.412 3346-3557/com.hy.binbin W/System.err:     a
    
    ...
    
  • 5.原来js的回调不是执行在UI线程,那么不是执行在UI线程,如何进行界面的改变。

    webView.addJavascriptInterface(new onJSCallAndroid(){
        @JavascriptInterface
        @Override
        public void onCallWorkcircle() {
            GlobalUtils.getHandler().post(new Runnable() {
                @Override
                public void run() {
                    ((MainActivity)mActivity).mTabHost.setCurrentTab(1);
                }
            });
        }
    
  • 6.让js回调的代码到UI线程去执行,问题成功解决!下班了…

3.Uncaught ReferenceError异常

  • 1.异常提示信息,非Error

    "Uncaught ReferenceError: browser is not defined", 
    source: http://www.baibai.cn/hongx/sd (144)
  • 2.解决 : 这信息就告诉你,浏览器没有定义方法 , 这么说, 就可以去跟后台聊一聊,是不是忘了配置Js.

4.安全限制问题

在下面将提到的 “在js调用方法上面加注解@JavascriptInterface”的问题,如果不加的话,logcat会出现如下提示,网页无法访问到你的方法

“Uncaught TypeError: window.homepage.onCallCompleteUrl is not a function”

5.other

  • 1.targetSdkVersion版本为17及17以上,在js调用方法上面加注解@JavascriptInterface;这是一个安全限制问题;

    Android文档:
    警告:如果你的程序目标平台是17或者是更高,你必须要在暴露给网页可调用的方法(这个方法必须是公
    开的)加上@JavascriptInterface注释。如果你不这样做的话,在4.2以以后的平台上,网页无法访问到你的方法。 
    
  • 2.webview加载网页的时候,显示不全

    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    在调用js的地方要通过Lint告知编译器,此处要访问Js方法,且启用js访问
    

5.总结: 注意!!! 细节!!!

0
0
查看评论

Android:你要的WebView与 JS 交互方式 都在这里了

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现 今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本...
  • carson_ho
  • carson_ho
  • 2017-03-22 09:19
  • 89179

Android JS与WebView交互存在的一些问题

一、背景概述 2013年Android平台暴露出WebView漏洞。利用该漏洞,攻击者可以通过存在风险的addJavascriptInterface接口函数提供的扩展穿透webkit执行本地Java代码,造成恶意代码在受害人的手机上执行,并可能进一步执行木马。 目前,google公司仅对An...
  • qq_27489007
  • qq_27489007
  • 2017-03-20 18:47
  • 704

Android中webview与JS交互、互调方法

对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成。 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为。这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取...
  • gengqiquan
  • gengqiquan
  • 2016-11-22 17:05
  • 9010

WebView---Android与js交互实例

Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML)交互有四种情况: 1) Android(Java)调用HTML中js代码 2) An...
  • IT1039871366
  • IT1039871366
  • 2015-06-05 09:37
  • 45343

iOSWebview与js交互之调整字体大小

先看效果图: iOS开发经常会跟Webview交互,主要调用的就是stringByEvaluatingJavaScriptFromString这个方法。也可以在-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSU...
  • H_Qiao
  • H_Qiao
  • 2018-01-09 15:36
  • 58

Android WebView JS交互 混淆打包需要注意的问题

android 4.2以后, 因为安全性的考虑 js交互需要添加注解, 因此注解需要保留 # 保留所有注解 -keepattributes *Annotation* -keepattributes *JavascriptInterface* # 替换成自己的包名 保留对应的交互方法 -ke...
  • chengkaizone
  • chengkaizone
  • 2016-07-01 14:55
  • 1197

WebView与js交互遇到的问题

1.在WebView中调用js,在4.4(target = 19)之前,只有一种方法:      调用js方法 test()      webView.loadUrl("javascript:test()"); &...
  • kaka123ac
  • kaka123ac
  • 2015-01-19 11:51
  • 1262

Android WebView使用以及与JavaScript进行交互实例

最近项目中使用到了WebView,所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究,自己也做了一个综合性的例子,以此来记录自己的学习成果。此例子主要实现了WebView的简单使用以及Android与Js进行交互的问题。 第一:WebView的使用 1.Web...
  • dongdengke123789
  • dongdengke123789
  • 2016-11-24 11:24
  • 768

Android开发之WebView和JS交互详解

Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。
  • jiaoyaning1210
  • jiaoyaning1210
  • 2016-03-31 14:04
  • 793

iOS UIWebView原生与JS交互

iOS的UIWebView加载网页后实现oc的原生方法与前端的js方法进行交互
  • blueCat_1128
  • blueCat_1128
  • 2017-12-20 10:29
  • 123
    个人资料
    • 访问:64215次
    • 积分:1197
    • 等级:
    • 排名:千里之外
    • 原创:54篇
    • 转载:13篇
    • 译文:0篇
    • 评论:9条
    最新评论