文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

android中webview控件和javascript交互实例

2022-06-06 10:23

关注

当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释:

代码如下:A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

一个能显示网页内容的View。该类是你实现一个自己的浏览器,或者只是在activity中显示网页内容的基础;它基于WebKit内核来显示网页,并且包含了实现前后翻页、放大缩小,文字搜索方法。

从上面你应该了解到了基本功能,也就是显示网页。这篇文章中我们主要讨论webview和Javascript的交互。如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择。

WebView和js的交互包含两方面,一是在html中通过js调用安卓的java代码;二是在安卓java代码中调用js。

一、html中通过js调用java代码

js中调用java代码其实就记住一点,webview设置一个和js交互的接口(注意这里只是一般的意思,并不是java中接口的含义),这个接口其实是一个一般的类,同时为这个接口取一个别名。这个过程如下:
代码如下:
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");
new  DemoJavaScriptInterface就是这个接口,demo就是这个接口的别名。
上面的代码执行之后在html的js中就能通过别名(这里是“demo”)来调用newDemoJavaScriptInterface类中的任何方法。

如我们想让html中的一个button点击之后调用java中的函数可以这样:
代码如下:
<input type="button"  value="click me"  onclick="window.demo.clickOnAndroid()"/>

但是因为安全问题,在Android4.2中(如果应用的android:targetSdkVersion数值为17+)JS只能访问带有 @JavascriptInterface注解的Java函数。因此如果你的开发版本比较高,需要在被调用的函数前加上@JavascriptInterface注解。

下面是谷歌给出的代码示例:
WebViewDemo.java
代码如下:
package com.google.android.webviewdemo;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class WebViewDemo extends Activity {
    private static final String LOG_TAG = "WebViewDemo";
    private WebView mWebView;
    private Handler mHandler = new Handler();
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);
        mWebView.setWebChromeClient(new MyWebChromeClient());
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
        mWebView.loadUrl("file:///android_asset/demo.html");
    }
    final class DemoJavaScriptInterface {
        DemoJavaScriptInterface() {
        }
       
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    mWebView.loadUrl("javascript:wave()");
                }
            });
        }
    }
   
    final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d(LOG_TAG, message);
            result.confirm();
            return true;
        }
    }
}

demo.html

代码如下:
<html>
    <script language="javascript">
       
        function wave() {
            alert("1");
            document.getElementById("droid").src="android_waving.png";
            alert("2");
        }
    </script>
    <body>
        <!-- Calls into the javascript interface for the activity -->
        <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;" >
                <img id="droid" src="android_normal.png"/><br>
                Click me!
        </div></a>
    </body>
</html>

main.xml

代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >                                            
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro"
        android:padding="4dip"
        android:textSize="16sp"
        />
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        />
</LinearLayout>

二、android调用js

上面的代码在演示如何在js中调用java代码的同时也演示了如何在java中调用js
调用形式:
代码如下:mWebView.loadUrl("javascript:wave()");
其中wave()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。

demo的解释:

现在你一定了解了android和js的交互了。是时候分析一些demo了,根据上面讲的你也应该比较清楚了。具体交互流程如下:

①点击图片,则在js端直接调用android上的方法clickOnAndroid();
②clickOnAndroid()方法(利用线程)调用js的方法。
③被②调用的js直接控制html。

个人总结:利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了,而html布局样式之类有DW这样强大的工具,而且网上很多源码,很多代码片。在UI和视觉效果上就会节省很多时间,重复发明轮子没有任何意义。

您可能感兴趣的文章:android WebView加载html5介绍Android中实现Webview顶部带进度条的方法Android WebView使用方法详解 附js交互调用方法android webview中使用Java调用JavaScript方法并获取返回值在Android系统中使用WebViewClient处理跳转URL的方法Android中Webview打开网页的同时发送HTTP头信息方法Android开发之WebView组件的使用解析解析Android中webview和js之间的交互Android中 webView调用JS出错的解决办法Android Webview滑进出屏幕闪烁的解决方法


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯