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

最新推荐文章于 2024-05-14 08:50:37 发布

飞猫个人博客

最新推荐文章于 2024-05-14 08:50:37 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/dongdengke123789/article/details/53318507

版权

安卓应用开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

第一：WebView的使用

1.WebView使用过程中需要网络权限，所以第一步要在清单文件声明此权限。

 <uses-permission android:name="android.permission.INTERNET"></uses-permission>

2.在布局文件中添加WebView控件，或者通过JAVA代码之间实例化Webview，此Demo是通过布局文件实现的。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</RelativeLayout>

3.对WebView进行相关设置，具体Api在代码中有注释，再此不在详细叙述。

package cn.chinaiptn.webviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewDemoActivity extends AppCompatActivity {
    private WebView webview;
    private WebSettings webSettings;
    private Activity mActivity;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webviewdemo);
        mActivity = WebViewDemoActivity.this;
        webview = (WebView) findViewById(R.id.webview);
        webview.loadUrl("http://www.baidu.com");
        WebSettings webSettings = webview.getSettings();
        //设置支持Javascript
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        //允许放到或者缩小
        webSettings.setSupportZoom(true);
        //隐藏webview缩放按钮
        webSettings.setDisplayZoomControls(false);
        // 为图片添加放大缩小功能
        webSettings.setUseWideViewPort(true);
        //自适应屏幕
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
        webSettings.setLoadWithOverviewMode(true);
        //取消滚动条
        webview.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
        //设置打开别的url是不适用系统浏览器
        webview.setWebViewClient(new MyWebviewClient());

    }

    class MyWebviewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //按下返回键的处理
        if (webview.canGoBack() && keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
            webview.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

第二：Android 调用JS代码

这里主要分两部分介绍，调用有参函数和调用无参数函数。

1.调用无参数函数。

（1）编写HTML代码，并放到assets目录下，相关html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title id="title">Nativetojs</title>
        <script type="text/javascript">
            function javacalljs(){
                 document.getElementById("nativetojs").innerHTML =
                     "<br\>JAVA调用了JS的无参函数";
            }
        </script>
    </head>
    <body >
    <p>安卓调用js</p>
    <div style="margin-top: 20px;margin-left: 20px">
        <div id="nativetojs"></div>
    </div>
    </body>
</html>

（2）在JAVA代码中进行调用：

加载本地html代码：

webview.loadUrl("file:///android_asset/nativetojs.html");

设置时间监听，调用JS代码（此处一定要确保函数名称与JS中的函数名称一致）：

        btn_tojs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

（3）效果图如下：

2.安卓调用有参函数

（1）编写HTML代码，并放到assets目录下，相关html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title id="title">Nativetojs</title>
        <script type="text/javascript">
            function javacalljswith(arg){
                 document.getElementById("nativetojs").innerHTML = "<br\>JAVA调用了JS的有参函数"+arg;
            }
        </script>
    </head>
    <body >
    <p>安卓调用js,包含参数</p>
    <div style="margin-top: 20px;margin-left: 20px">
        <div id="nativetojs"></div>
    </div>
    </body>
</html>

（2）在JAVA代码中进行调用：

加载本地html代码：

 webview.loadUrl("file:///android_asset/nativetojswithparam.html");

设置时间监听，调用JS代码（此处一定要确保函数名称与JS中的函数名称一致，并确保字符串两端加上引号，否则会执行不到JS）：

        btn_tojs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = ed_content.getText().toString().trim();
                webview.loadUrl("javascript:javacalljswith("+"'"+content+"'"+")");
            }
        });

（3）运行效果如下：

第三：JS调用Android代码

（1）编写HTML代码，并放到assets目录下（确保onclick下的别名和方法名与JAVA代码中一致），相关html代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title id="title">JStoNative</title>
    </head>
    <body >
    <p style="font-size:34px">JS调用安卓代码</p>
    <div style="margin-top: 20px;margin-left: 20px">
       <input type="button"  value="我要调用安卓代码啦。" οnclick="jstoandroid.startFunction()"  /></br>
        <input type="button"  value="我要调用安卓代码啦，切换页面" οnclick="jstoandroid.updateActivity()"  />
    </div>
    </body>
</html>

（2）在JAVA代码进行相关实现

    //由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
    //JS调用Android JAVA方法名和HTML中的按钮 onclick后的别名后面的名字对应
    @JavascriptInterface
    public void startFunction(){

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(JsToNativieActivity.this, "hahahha", Toast.LENGTH_SHORT).show();

            }
        });
    }
    @JavascriptInterface
    public  void updateActivity(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Intent intent=new Intent(JsToNativieActivity.this,MainActivity.class);
                startActivity(intent);
            }
        });
    }

到此，Webview的简单使用以及与JS的交互已经介绍完毕，如果有不正确出之处，欢迎讨论！

点击去下载源码

飞猫个人博客

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Android WebView使用以及与JavaScript进行交互实例

最近项目中使用到了WebView，所有就深入研究了Webview的使用以及与JavaScript进行交互的问题。经过研究，自己也做了一个综合性的例子，以此来记录自己的学习成果。此例子主要实现了WebView的简单使用以及Android与Js进行交互的问题。第一：WebView的使用1.WebView使用过程中需要网络权限，所以第一步要在清单文件声明此权限。 2.在布局文件中添加
复制链接

扫一扫