WebView,JS交互

WebView

回退：先检查是否可以回退
webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
webView.goBack();//跳到上个页面 一般用在onBackPressed()函数中。
前进，检查是否可以前进：
webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)
webView.goForward();//跳到下个页面
停止：
webView.stopLoading();
刷新：
webView.reload();

Activity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

ProgressBar progressBar;
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.map1);
    progressBar = findViewById(R.id.pro);
    findViewById(R.id.b1).setOnClickListener(this);
    findViewById(R.id.b2).setOnClickListener(this);
    findViewById(R.id.b3).setOnClickListener(this);
    findViewById(R.id.b4).setOnClickListener(this);
    initWebView();
}

private void initWebView() {

    webView.loadUrl("https://docs.open.alipay.com/54/104509/");
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            progressBar.setVisibility(View.VISIBLE);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            progressBar.setVisibility(View.GONE);
        }
    });

    webView.setWebChromeClient(new WebChromeClient(){
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
            progressBar.setProgress(newProgress);
        }
    });
}

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.b1:
            webView.goForward();
            break;
        case R.id.b2:
            webView.goBack();
            break;
        case R.id.b3:
            webView.reload();
            break;
        case R.id.b4:
            webView.stopLoading();
            break;
    }
}
}

xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:text="前进"
        android:id="@+id/b1"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="后退"
        android:id="@+id/b2"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="刷新"
        android:id="@+id/b3"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:text="暂停"
        android:id="@+id/b4"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>
<ProgressBar
    android:id="@+id/pro"
    android:maxHeight="20dp"
    style="@android:style/Widget.Holo.Light.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
<WebView
    android:id="@+id/map1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></WebView>

</LinearLayout>

效果

JS交互

android调用js：
1，websetting.setJavaScriptEnable(true) 让android和js可以互相调用。
2， mWebView.loadUrl(“javascript:wave()”);
其中wave（）是js中的一个方法。
js调用android。
1，websetting.setJavaScriptEnable(true) 让android和js可以互相调用。
2，实现一个Java类，类中方法使用注解@JavascriptInterface。
3、使用系统webview方法 addJavascriptInterface 注入 java 对象来让js调用我们注解的方法。
4，在js中就可以调用Java类注解的方法。
代码中的“demo”是在android中指定的调用名称，即
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), “demo”);
调用形式：

<br/>
<input type="button"  value="调用java代码，且无参" onclick="window.android.noParameterFunction()" />
<br/>
<input type="button"  value="调用java代码，且有参" onclick="window.android.parameterFunction('JS->android 有参成功')"/>

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface() 中的一个方法。

js.html

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">

function callAlert() {
    alert("Android Alert");
}
 
function callJs(){
     document.getElementById("content").innerHTML =
         "<br\>Android调用了JS的无参函数";
}

function callJsWithArg(arg){
     document.getElementById("content").innerHTML =
         "<br\>Android调用了JS的有参函数 " + arg;
}
</script>
</head>

<body>
以下为html内容<br/>
<h1><div id="content">显示一条文本</div></h1>
<br/>
<input type="button"  value="调用Android代码，且无参" onclick="window.android.noParameterFunction()" />
<br/>
<input type="button"  value="调用Android代码，且有参" onclick="window.android.parameterFunction('JS->android 有参成功')"/>
</body>

自定义类

public class JSDome {

Context context;

public JSDome(Context context) {
    this.context = context;
}

@JavascriptInterface
public void noParameterFunction(){
    Toast.makeText(context, "JS调用android无参方法", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void parameterFunction(String s){
    Toast.makeText(context, "JS调用android的有参方法"+s, Toast.LENGTH_SHORT).show();
}
}

Activity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    webView = findViewById(R.id.webview1);
    findViewById(R.id.bnt1).setOnClickListener(this);

    initWebView();
}

private void initWebView() {
    webView.loadUrl("file:///android_asset/js.html");

    WebSettings settings = webView.getSettings();

    settings.setJavaScriptEnabled(true);

    webView.addJavascriptInterface(new JSDome(this),"android");
}

@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.bnt1:
            webView.loadUrl("Javascript:callJsWithArg(\"我是Android\")");
            break;
    }
}
}

xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
<Button
    android:id="@+id/bnt1"
    android:text="js"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

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

</WebView>
</LinearLayout>

效果