安卓使用webview中与JS相互传递数据

最新推荐文章于 2024-08-07 10:17:25 发布

visa杨

最新推荐文章于 2024-08-07 10:17:25 发布

阅读量7.6k

点赞数 2

文章标签：安卓与js通信安卓与webvie通信安卓与html传递数据

本文链接：https://blog.csdn.net/qq_21267961/article/details/79494829

版权

安卓在使用webview过程中，常常要与js间进行通信。这次我做了简单的总结，如下。

一、js传递数据给安卓端：

主activity，

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;

   private String url = "http://wechat-dev.cb3dp.com/testwebview.html";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = findViewById(R.id.webview);
        initWebView();
    }

    private void initWebView() {
        WebSettings settings = mWebView.getSettings();

        //settings.setUseWideViewPort(true);//调整到适合webview的大小，不过尽量不要用，有些手机有问题
        settings.setLoadWithOverviewMode(true);//设置WebView是否使用预览模式加载界面。
        mWebView.setVerticalScrollBarEnabled(false);//不能垂直滑动
        mWebView.setHorizontalScrollBarEnabled(false);//不能水平滑动
        settings.setTextSize(WebSettings.TextSize.LARGEST);//通过设置WebSettings，改变HTML中文字的大小
        settings.setJavaScriptCanOpenWindowsAutomatically(true);//支持通过JS打开新窗口
        //设置WebView属性，能够执行Javascript脚本
        mWebView.getSettings().setJavaScriptEnabled(true);//设置js可用
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.addJavascriptInterface(new AndroidJavaScript(getApplication()), "android");//设置js接口
        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);//支持内容重新布局

//        mWebView.loadDataWithBaseURL(url, null, "text/html", "utf-8", null);

        mWebView.loadUrl(url);


    }


    /**
     * AndroidJavaScript
     * 本地与h5页面交互的js类，这里写成内部类了
     * returnAndroid方法上@JavascriptInterface一定不能漏了
     */
    private class AndroidJavaScript  {
        Context mContxt;

        public AndroidJavaScript (Context mContxt) {
            this.mContxt = mContxt;
        }

        @JavascriptInterface
        public void returnAndroid(String name) {//从网页跳回到APP，这个方法已经在上面的HTML中写上了
            if (name.isEmpty()||name.equals("")){
                return ;
            }
            Toast.makeText(getApplication(),name,Toast.LENGTH_SHORT).show();
            //这里写你的操作///
            //MainActivity就是一个空页面，不影响
            Intent intent = new Intent(MainActivity.this, SecondActivity.class);
            intent.putExtra("name",name);
            startActivity(intent);
        }
    }

}

html，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>
<style>
img{ width:100% !important;}
</style>
<img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/dd9d1d686cdc814db9653b254e00402e_259_194.jpg" alt="" />
<p style="text-align:right;">品类定位的思考</p>
<h3>
<strong>
<span style=\"color:#00D5FF;\">品类定</span>
</strong>
<h3>
<a href='JavaScript:android.returnAndroid("要返回给APP的数据")'>点击我跳回APP</a>
</body>
</html>

主要的方法，就是js端调用安卓端声明的方法，JavaScript:android.returnAndroid("要返回给APP的数据") 以及安卓端抛出的方法，具体请看 AndroidJavaScript类，

二、安卓端传数据到js端

主activity

public class SecondActivity extends AppCompatActivity {
    private TextView tv;
    private WebView mWebView;

//    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        tv = findViewById(R.id.tv);

        mWebView = findViewById(R.id.webview);

        String name = getIntent().getStringExtra("name");
        if (!TextUtils.isEmpty(name)){
            tv.setText(name);
        }

        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new MyWebChromeClient());

//        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("http://wechat-dev.cb3dp.com/testwebview2.html");

        tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mWebView.loadUrl("javascript:javaCall('fasff')");
            }
        });
    }

    /**
     * Provides a hook for calling "alert" from javascript. Useful for
     * debugging your javascript.
     */
    final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d("TAG", message);
            result.confirm();

            tv.setText(message);
            return true;
        }
    }

}

html，

<html>  

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<script language="javascript">  
   
    function javaCall(str){  
		
       //lat = window.demo.GetLat(); 	
		alert("11111")
		document.getElementById("btn").value = str;
    }  
  
</script>  

</head>

<body οnlοad="initialize()">  
<!-- Calls into the javascript interface for the activity -->  
<!--<a id="btn_test" onClick="window.demo.clickOnAndroid(lat)">  -->
    <div style="width:80px;  
            margin:0px auto;  
            padding:10px;  
            text-align:center;  
            border:2px solid #202020;" >  
    Click me!  
    </div>  
	
	<input id = "btn" type="button" value="按钮"/>
</a>  
</body>  
</html>

这个比上面那个要简单些，只需要js 声明方法，然后安卓直接调用即可， mWebView.loadUrl("javascript:javaCall('fasff')");

项目下载地址