android中WebView和javascript实现数据交互实例

在看懂这篇文章之前首先要有javascript基础。

(1) js调用android的方法：


代码如下:

WebView wView；
wView. addJavascriptInterface (Object obj, String interfaceName);

是实例化一个对象，在html的js中调用，第二个参数是实例化对象的别名，如果要使用这个obj，则在js中使用的名字
就是interfaceName。

代码如下:

public class jsWebDemo extends Activity {  
    WebView wView；

/** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);   
        wView = (WebView)findViewById(R.id.wv1);  
          
       WebSettings wSet = wView.getSettings();  
        wSet.setJavaScriptEnabled(true);

ProxyBridge pBridge = new ProxyBridge();  
        wView.addJavascriptInterface(pBridge, "AliansBridge");  
        
        wView.loadUrl("file:///android_asset/index.html");  
          
    }  
 
 private class ProxyBridge {  
  public int one () {  
   return 1;  
  }  
 }  
 
}

来看一下index.html的内容：
 

代码如下:

<html>
  <mce:script language="javascript"><!--
 
        /* This function is invoked by the activity */  
        function wave() {  
            alert("1");  
            document.getElementById("droid").src="android_waving.png";  
            alert("2");  
        }  
   
// --></mce:script>
<body>     
<div id="output">Test page.</div>

<a onClick="window.demo.clickOnAndroid()">
 <div style="width:100px;  
            margin:0px auto;  
            padding:10px;  
            text-align:center;  
            border:2px solid #202020;" > 
                <img id="droid" src="android_normal.png" mce_src="android_normal.png"/><br> 
                Click me!  
        </div>
 </a>
<input type="submit" value="change to 1" onclick="document.getElementById('output').innerHTML

=AliansBridge.one()" />     
</body>
</html>

这里的AliansBridge即是调用的JAVA对象。
要注意的是，如果你只有一个方法需要被js调用只new一个对象就行：
ProxyBridge pBridge = new ProxyBridge();
wView.addJavascriptInterface(pBridge, "AliansBridge");
如果你需要调用好多个方法，就要把整个android程序所在的类本身实例化传递进去：
wView.addJavascriptInterface(this, "AliansBridge");
(2) android调用js的方法：wView.setWebChromeClient (WebChromeClient client)
要用到Handler更新UI，Handler mHandler = new Handler()；

代码如下:

mWebView.setWebChromeClient(new MyWebChromeClient());               
    mWebView.addJavascriptInterface(new Object(){
    /**     
     * This is not called on the UI thread. Post a runnable to invoke     
     * loadUrl on the UI thread.     
     */       
    public void clickOnAndroid() {       
        mHandler.post(new Runnable() {        
            public void run() {        
                mWebView.loadUrl("javascript:wave()");        
            }        
        });                
    }
 }, "demo");

同理，在html中必须有一个名为demo的对象调用clickOnAndroid()方法。

代码如下:

/**     
 * Provides a hook for calling "alert" from javascript. Useful for     
 * debugging your javascript.     
 */       
final class MyWebChromeClient extends WebChromeClient {        
    @Override    
    public boolean onJsAlert(WebView view, String url, String message,     
            JsResult result) {                     
        result.confirm();      
    return super.onJsAlert(view, url, message, result);                       
    }
}

赞 (0)

相关推荐

  • Android总结之WebView与Javascript交互（互相调用）

    Android总结之WebView与Javascript交互（互相调用）

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybrid App居多,单纯的数据展示我们直接采用WebView来渲染就可以了,但是有时候可能会用到两者之间传递参数的情况,今天就来总结一下两者之间如何互相调用.本篇主要介绍WebView与Javascript交互数据,关于如何将H5网页呈现在WebView上可以参考这篇博客文章:Android总结之Web

  • IOS中UIWebView、WKWebView之JS交互

    做客户端开发,肯定避免不了JS交互,于是自己对苹果接口做了个简易封装: JSExport-->UIWebView+Interaction.WKScriptMessageHandler -->WKWebView+Interaction以备以后使用. 代码非常简洁,见这里:https://github.com/V5zhou/JSInteraction.git 旧方式 旧的交互方式有通过UIWebViewDelegate实现的:JS与客户端定义好跳转页面参数,在将要跳转时捕获关键字,然后处理业务.

  • ios下OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支持了HTML5的新特性.这篇文章就们就拿WKWebView来小试牛刀 一.WKWebView Framework WKWebView的14个类与3个协议: WKBackForwardList: 之前访问过的 web 页面的列表,可以通过后退和前进动作来访问到. WKBackForwardListIt

  • 解析Android中webview和js之间的交互

    1.android中利用webview调用网页上的js代码.Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true,,然后通过loadUrl就可以直接进行调用,如下所示:mWebView.getSettings().setJavaScriptEnabled(true);mWebView.loadUrl("javascript:test()"); 2. 网页上调用android中java代码的方法在网页中

  • android中webview控件和javascript交互实例

    当我们要实现丰富的图文混排效果的时候,我们一般会使用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

  • Android WebView上实现JavaScript与Java交互

    Android WebView上实现JavaScript与Java交互

    其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢.图片.css .js .html这些资源每个大概需要10-200ms ,一般都是30ms就ok了.不过webview是必须等到全部资源都完成加载,才会进行渲染的,所以加载的速度很重要!从Google上我们了解到,webview加载页面的顺序是:先加载html,然后从里面解析出css.js文件和页面上的图片资源进行加载.如果webkit的缓存里面有,就不加载.加载完这些资源之后,就进行css的渲染和js的执行.Css的渲染一般不

  • Android webview与js的数据交互

    Android webview与js的数据交互

    项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电话弹出原生dialog询问是否拨打,点击web页里面的图片进行放大处理.针对于上述的需求我们通用的方式大概有两种,一是监听a标签,在shouldOverrideUrlLoading根据URL进行判断,二是js代码注入,找到我们想要处理的元素进行js代码注入.下面就这两种方式简单的进行描述 首先需要初

  • android中WebView和javascript实现数据交互实例

    在看懂这篇文章之前首先要有javascript基础. (1) js调用android的方法: 复制代码 代码如下: WebView wView: wView. addJavascriptInterface (Object obj, String interfaceName); 是实例化一个对象,在html的js中调用,第二个参数是实例化对象的别名,如果要使用这个obj,则在js中使用的名字 就是interfaceName. 复制代码 代码如下: public class jsWebDemo ex

  • Android中webView加载H5绑定cookie实例

    简介: 我最近在做项目的时候遇到了这种情况: 1.需要用WebView实现一个H5的登陆注册. 2.大赛报名,用H5实现.这些情况下,我需要把cookie传给服务器,让其判断当前账户是否登陆成功.查阅了一些资料后,终于搞定了. 1. 给一个加载的链接设置cookie private void syncCookie(String url) { try { CookieSyncManager.createInstance(mWvSignUp.getContext());//创建一个cookie管理器

  • Android中webview与JS交互、互调方法实例详解

    Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这

  • Android中WebView与Js交互的实现方法

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

  • Android中WebView的一些简单用法

    Android中WebView的一些简单用法

    Android中WebView的一些简单用法 一直想写一个关于 WebView 控件的 一些简单运用,都没什么时间,这次也是挤出时间写的,里面的一些基础知识就等有时间再更新讲解一下,今天就先把项目出来做一些简单介绍,过多的内容可以看我的源码,都传到github上了. 下面是项目的效果图: 应用用到的是 MVP 设计模式,对这种模式还不太了解的可以先自行google一下,不然项目估计会看的晕,虽然我的代码都很简洁的. 对于MVP 可以带着一个思路看源码,那就是 activity(或其他组件)通过

  • Android中WebView的基本配置与填坑记录大全

    Android中WebView的基本配置与填坑记录大全

    前言 在应用程序开发过程中,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复. 但是在Android开发中,由于Android版本分化严重,每一个版本针对webview都有部分更改,因此在开发过程中会遇到各种各样的坑,下面这篇就来给大家介绍关于Android中WebView的基本配置与填坑记录,话不多说了,来一起看看详细的介绍吧. 基本配置 // 硬件加速 getActivity().getWindow().setFlags( WindowMan

  • Android中WebView加载网页设置进度条

    Android中WebView加载网页设置进度条

    本文实例为大家分享了Android中WebView加载网页设置进度条的具体代码,供大家参考,具体内容如下 效果: xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" a

  • Android中WebView用法实例分析

    Android中WebView用法实例分析

    本文实例讲述了Android中WebView用法.分享给大家供大家参考,具体如下: WebView相当于一个迷你浏览器,采用WebKit内核,因此完美支持html,javascript,css等. 在开发过程中应该注意几点: 1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误. 2.如果访问的页面中有Javascript,则webview必须设置支持Javascri

  • android中Webview实现截屏三种方式小结

    本人最近学习了android中Webview实现截屏三种方式,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 第一种方式 通过调用webview.capturePicture(),得到一个picture对象,根据图像的宽和高创建一个Bitmap,再创建一个canvas,绑定bitmap,最后用picture去绘制. //获取Picture对象 Picture picture = wv_capture.capturePicture(); //得到图片的宽和高(没有reflec

随机推荐