webview与Js的交互_hwcvbjs-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35703234/article/details/67640972

Android自带的有webview，可以加载类似h5页面的内容，那么问题来了，Android原生语言可以之间页面的交互很简单，那么webview加载的h5页面如何相互之间调用呢。当然首先我们要有一点Js和h5的知识为此出现了本篇文章：

首先我们写一段html代码放在assets文件中;

<!DOCTYPE HTML>
<html>
<script type="text/javascript">

  function gotoActivity (activity,string) {
    nativeMethod.toActivity(activity,string);
  }
  function alertmake(string){
  	nativeMethod.makecreate(string);
  }
  function getfile(){
    return string;
  }
   function getPic(){
   	  var pathstring=showData(data);
       window.alert(pathstring);
       document.getElementById("testImage").src=pathstring;
       for(i=0;i<10;i++){
       	  document.getElementById('myimage').innerHTML='<img src='+pathstring+' width="100%" height="200"/>';
       }
       document.getElementById('myimage1').innerHTML='<p>"'+pathstring+'"</p>';
      }

   function showData(data) {
        console.log(data)
        console.log("Hello")
        if (typeof data != 'object') {
            data = JSON.parse(data);
        }
         return data.MailTitle;
      }
   	var data = window.jsObj.HtmlcallJava();
   	document.getElementById("myimage2").addEventListener("click", myfunction);
   	function myfunction(){
    gotoActivity("b",showData(data));
}
</script>
<body>
<button onClick="gotoActivity('a',10)">gotoActivity A</button>
<button onClick="alertmake('hahaa')">gotoA</button>
<button οnclick="getPic()">加载图片</button>
<div id="myimage">
</div>
<div id="myimage1"></div>
<p id="myimage2">this is a </p>
<img id="testImage" src="" width="120" height="100" />
</body>
</html>

然后再android 布局文章中使用webview

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#ffffff"
    android:layout_height="match_parent" >

    <WebView android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"/>
</RelativeLayout>

Java代码：

package com.zhy.demo_zhy_06_choujiangzhuanpan;

import org.json.JSONException;
import org.json.JSONObject;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class HtmlActivity extends Activity {
    WebView wv;
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        wv = (WebView)findViewById(R.id.webView);
        wv.getSettings().setJavaScriptEnabled(true);
        wv.addJavascriptInterface(this, "nativeMethod");
        wv.addJavascriptInterface(getHtmlObject(), "jsObj");
        wv.loadUrl("file:///android_asset/new_file.html");
    }

    private Object getHtmlObject() {
        Object object=null;
        object=new Object(){
            /**  java向html中传递值===html调用java中的方法。@JavascriptInterface  4.2版本sdk17以后 要在每个方法上面加上这个注释
             * <br>不然 这个方法window.jsObj.HtmlcallJava(); 找不到 对应的方法名字
             **/
            @JavascriptInterface
            public String HtmlcallJava() {
                JSONObject ImgJsonObject=new JSONObject();
                try {
                    ImgJsonObject.put("MailTitle", "http://img04.tooopen.com/images/20130805/tooopen_10473021.jpg");
                } catch (JSONException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                Toast.makeText(getApplicationContext(),ImgJsonObject.toString(), 0).show();
                return ImgJsonObject.toString();
            }
        };
        return object;
    }

    @JavascriptInterface
    public void toActivity(String activityName,String i) {
        //此处应该定义常量对应，同时提供给web页面编写者
        if(TextUtils.equals(activityName, "a")){
            Toast.makeText(getApplicationContext(), i, 0).show();
            startActivity(new Intent(this,AActivity.class));
        }else {
            Toast.makeText(getApplicationContext(), i, 0).show();
            startActivity(new Intent(this,CBActivity.class).putExtra("imgurl", i));
        }
    }
    
    @JavascriptInterface
    public void makecreate(String i) {
         Toast.makeText(getApplicationContext(),i, 0).show();
         startActivity(new Intent(this,TestActivity.class));
    }  
}

代码粘贴完毕，下面我们分析一下代码：

1.调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.google.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

2.如果没有此设置会调用系统的浏览器：

wv.setWebViewClient(new WebViewClient(){
      @Override      
public boolean shouldOverrideUrlLoading(WebView view, String url) {          
view.loadUrl(url);         
 return true;}  
});

3.页面缩放

适应手机屏幕

webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);

放大设置

webView.getSettings().setDisplayZoomControls(true);

无限放大

webView.getSettings().setBuiltInZoomControls(true);

比例缩放

webView.setInitialScale(50);