android中webview与js的交互

最新推荐文章于 2024-05-15 03:35:51 发布

江三木洛

最新推荐文章于 2024-05-15 03:35:51 发布

阅读量373

点赞数

分类专栏：安卓-精彩案例文章标签： android

本文链接：https://blog.csdn.net/xw13782513621/article/details/60868482

版权

安卓-精彩案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近做Android项目时需要进行webview与html页面中的js进行交互，包括android调用js以及js调用android本地代码，现将代码整理记录下。
整个布局比较简单，就是的一个TextView加一个WebView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context="com.example.demowebviewjs.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="调用js方法"
        android:textSize="35sp" />

    <WebView
        android:id="@+id/wb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"></WebView>
</LinearLayout>

由于我们加载的网页是在本地的，所以不需要任何权限，进行完控件的初始化后就加载页面，并设置成支持js

WebView wb = (WebView) findViewById(R.id.wb);
//设置编码
wb.getSettings().setDefaultTextEncodingName("utf-8");
//支持js
wb.getSettings().setJavaScriptEnabled(true);
//载入页面
wb.loadUrl("file:///android_asset/test.html");

android调用网页中的代码比较简单，只需要调用webview的loadUrl方法

wb.loadUrl("javascript:funFromjs()");

其中javascript是固定写法，冒号后面跟上页面中的方法名，如果方法中有参数的话只需要用单引号引用并且中间用逗号隔开，例如

wb.loadUrl("javascript:funFromjs('mUserName','mPsw')");

js调用安卓本地代码的话webview需要调用addJavascriptInterface这个方法

//设置本地调用对象及其接口
wb.addJavascriptInterface(new Object() {
    @JavascriptInterface //sdk17版本以上加上注解
    public void funFromAndroid(String name) {
        Toast.makeText(MainActivity.this, name,Toast.LENGTH_LONG).show();
        }

    public void fun(String name) {
         Toast.makeText(MainActivity.this, "调用fun2:" + name, Toast.LENGTH_SHORT).show();
        }
  }, "android");

可以看到其实就是两个参数，一个Object，一个String，其中Object中我们可以定义一些方法让js调用，不过需要注意的是如果SDK版本号高于17的话，如果希望js可以调用，那么需要在方法上加上@JavascriptInterface这个注解，后面的String就类似于对象名一样，最后加上js的代码

<!DOCTYPE html>
<html>
<head>
    <meta chatset="utf-8" />
    <title>This is a test</title>
</head>

<body>
    <a>js中调用本地方法</a>
    <script>

    function funFromjs(){
        document.getElementById("helloweb").innerHTML="HelloWebView,i'm from js";
    }
    var aTag = document.getElementsByTagName('a')[0];
    aTag.addEventListener('click', function(){
        //调用android本地方法
        android.funFromAndroid("调用android本地方法funFromAndroid(String name)！！");
        return false;
    }, false);
    </script>
    <p></p>
    <div id="helloweb"> 

    </div>
</body>
</html>

Demo下载

江三木洛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android中webview与js的交互

android中webview与js的交互最近做Android项目时需要进行webview与html页面中的js进行交互，包括android调用js以及js调用android本地代码，现将代码整理记录下。整个布局比较简单，就是的一个TextView加一个WebView<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:androi
复制链接

扫一扫