• WebView中JS调用Android Method 遇到的坑整理


    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互。

    其坑无数,相信用过的都知道,一个一个来解决吧。

    1.怎么互调:

    <!DOCTYPE>
    <html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            function android(bl){
                if(bl){
    
                    document.getElementById("ap").innerHTML= "是true啊参数传过来了"
                }else{
                    document.getElementById("ap").innerHTML= "改变了段落的文字"
                }
            }
            function self(){
                    document.getElementById("btn").innerHTML= "javascript改变按钮文字"
            }
    
        </script>
    </head>
    <body>
        <div>
            <p id="ap">这是一个段落</p>
            <button onclick="window.hello.showAndroid()">点击Toast</button>
    
            <button onclick="self()" id="btn">javascriptzi自己的方法</button>
        </div>
    
    </body>
    </html>

    上面是js代码 ,下面是android代码:

    public class MyWebViewtest extends AppCompatActivity {
        @Override
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.webviewtest_layout);
    
            initView();
        }
    
        private void initView() {
            final WebView webView = (WebView) findViewById(R.id.my_web);
            webView.loadUrl("file:///android_asset/webviewtest.html");
    
            WebSettings webSettings = webView.getSettings();
            webSettings.setJavaScriptEnabled(true);
            webView.addJavascriptInterface(new JiaoHu(),"hello");
    
            Button btn = (Button) findViewById(R.id.get_js);
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    webView.loadUrl("javascript:android(true)");
                }
            });
        }
    
        public class JiaoHu{
            @JavascriptInterface
            public void showAndroid(){
                Toast.makeText(MyWebViewtest.this,"js调用了android的方法",Toast.LENGTH_SHORT).show();
            }
        }
    }

    js调用android方式: <button onclick="window.hello.showAndroid()">点击Toast</button>

    hello指的是类(接口)的别名 ,在我们上面的代码中也就是JiaoHu类 , showAndroid()是方法名,所以android和js要约定好的就是 类的别名 以及 方法名 即可调用成功。

    android调用js方式:webView.loadUrl("javascript:android(true)");

    android()为js中定义好的一个方法名,我们可以在android代码中传入一个参数true,在js中便能接收到,执行 document.getElementById("ap").innerHTML= "是true啊参数传过来了" 这一句。

    2.坑之一(webview中js的方法不能执行):

    web组的同事在采用 ajax 框架请求后台数据的时候,我这里则无法显示,原因少了一句话:

    webView.getSettings().setDomStorageEnabled(true);  //很关键!!!!

    这句代码让android能读取js的节点,也就可以执行了

    3.坑之二(webView中h5变形记):

    我们做的活动是类似于这样的

     

     然鹅,当点击了输入框,弹出软键盘,变成这样的:

    没错,妈的变形了(变形记),这个需要前端同事将window的高度设置为定长(之前height=100%)

     var HEIGHT = $('body').height();
            $(window).resize(function() {
                $('.main').height(HEIGHT);
            });

    可以的,这个解决了。

    坑之三(js中操作android的UI了 导致 java.lang.IllegalStateException: Calling View methods on another thread than the UI thread.at 异常):

    这是最恶心的,没有之一,之前没遇到过。

    我们活动中要集成umeng分享,分享到微信,分享到朋友圈都没有问题(更神奇的是做的时候还是ok的,提交给测试的时候就变卦了,日了狗了)。

    涉及到一个操作UI的问题,那我们肯定要将js调用我们的代码放在UI线程中啊

    runOnUiThread(new Runnable() {
        @Override 
        public void run() { 
            // Code for WebView goes here 
        } 
    }); 

    这个自然没问题,也就是要把我们注解的方法的内容放在UI线程中跑,但是你的 类 你的 接口 他不是Activity啊 没有runOnUiThread方法啊 。

    急中生智,让我们的类 继承 Activity 

    public class FreeFlowInterface extends Activity

    ok,现在就可以了,然后在这么一来

    @JavascriptInterface
        public void shareToFriend(){
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    Bitmap bitmap = drawableToBitmap(R.drawable.sharepic);
                    mShareController = UmengShareUtils.share(activity,mShareController,shareTitle,shareContent,targetUrl,bitmap);
                }
            });
    
        }

    坑真的不少,且行且小心。

  • 相关阅读:
    详解Javascript匿名函数的使用 转载自IT EYE Blog
    漂亮、免费和响应式HTML5网站模板 转
    Truth, Equality and JavaScript
    Ember.js 示例
    UX Pin 一款在线界面设计网站
    关于工资的三个秘密
    Semantic Versioning 如何进行版本管理
    CSSS CSS幻灯片
    oracle 导入数据报600错误
    Android 初步Android文件目录介绍
  • 原文地址:https://www.cnblogs.com/cherrylv/p/6424199.html
Copyright © 2020-2023  润新知