android中webview与js的交互

    xiaoxiao2021-03-25  255

    最近做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下载

    转载请注明原文地址: https://ju.6miu.com/read-292.html

    最新回复(0)