Android原生webview中js交互

http://www.cnblogs.com/android-blogs/p/4891264.html

Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中,软件一打开就会访问网络获取到最新的界面。缺点是会受到网络信号的影响,从而导致访问速度慢。

1.用WebView来显示HTML代码

2.允许WebView执行JavaScript

webView.getSettings().setJavaScriptEnabled(true);

3.获取到HTML文件,也可从网络中获取

webView.loadUrl("file:///android_asset/index.html");   //HTML文件存放在assets文件夹中

4.添加一个对象, 让JS可以访问该对象的方法, 该对象中也可以调用JS中的方法

webView.addJavascriptInterface(new Contact(), "contact");

完整示例代码如下:

效果图:

MainActivity

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {
    private WebView webView;

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //加载页面
        webView = (WebView) findViewById(R.id.webView);
        //允许JavaScript执行
        webView.getSettings().setJavaScriptEnabled(true);
        //找到Html文件,也可以用网络上的文件
        webView.loadUrl("file:///android_asset/index.html");
        // 添加一个对象, 让JS可以访问该对象的方法, 该对象中可以调用JS中的方法
        webView.addJavascriptInterface(new Contact(), "contact");
    }

private final class Contact {
        //JavaScript调用此方法拨打电话
        public void call(String phone) {
            startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));
        }

//Html调用此方法传递数据
        public void showcontacts() {
            String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]"; 
            // 调用JS中的方法
            webView.loadUrl("javascript:show(‘" + json + "‘)");
        }
    }
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function show(jsondata){            
                    var jsonobjs = eval(jsondata);
                    var table = document.getElementById("personTable");
                    for(var y=0; y<jsonobjs.length; y++){
                        var tr = table.insertRow(table.rows.length); 
                        var td1 = tr.insertCell(0);
                        var td2 = tr.insertCell(1);
                        td2.align = "center";
                        var td3 = tr.insertCell(2);
                        td3.align = "center";
                        td1.innerHTML = jsonobjs[y].name; 
                        td2.innerHTML = jsonobjs[y].amount; 
                        td3.innerHTML = "<a href=‘javascript:contact.call(\""+ jsonobjs[y].phone+ "\")‘>"+ jsonobjs[y].phone+ "</a>"; 
                    }
            }
        </script>
    </head>
    <body >
       <table border="0" width="100%" id="personTable" cellspacing="0">
            <tr>
                <td width="30%">姓名</td>
                <td width="30%" align="center">存款</td>
                <td align="center">电话</td>
            </tr>
        </table>
    </body>
</html>

拨打电话需要添加权限:

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

url:http://greatverve.cnblogs.com/archive/2012/01/18/android-javascript.html

时间: 2024-08-06 07:19:53

Android原生webview中js交互的相关文章

WebView中JS调用Android Method 遇到的坑整理

WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> function android(bl){ if(bl){

[Android]Webview中JS接口调用Java-版本问题

问题: The javascript to java bridge on 2.3 Gingerbread is causing crashes. This is 100% reproducible using the WebViewDemo application from here: http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples/WebViewDemo. Note: The project

webview中js调用Android中的方法

package com.example.helloworld; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu; import android.webkit.WebView; public class MainActivity extends Activity { private WebView webView = null

Android的WebView通过JS调用java代码

做项目时候会遇到我们用WebView 打开一个web,希望这个web可以调用自己的一些方法,比如我们在进一个web页面,然后当我们点击web上的某个按钮时,希望能判断当前手机端是否已经登录,如果未登录,那么就会跳转到登录页面(登陆页面是另一个Activity).这个时候,一个简单的做法就是在按钮动作事件的js上调用java的方法,从而起到判断是否登录,并决定是否跳转到另一个页面. Google的WebView为我们提供了 addJavascriptInterface(Object obj, St

Android中使用WebView与JS交互全解析

1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,Android和iOS两边都要维护同一套界面甚至是逻辑,这样开发和维护的成本会很大,而使用hybrid的开发方式的话,让前端的同学去写一套界面和逻辑,对于native端来说只要使用对应的容器去展示就可以了(对于Android来说这个容器当然就是WebView).那为什么不所有的页面都使用这种方式开发呢?

WebView中Js与Android本地函数的相互调用

介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Android原生函数的相互调用就必不可少了.这里写了一个demo,实现点击html中的图片进行本地展示. 原理 1.Android调用js很简单,直接webView.loadUrl("javascript:JS中的方法名称()");即可. 2.js调用Android方法,需要使用WebView.

android webview与js交互(动态添加js)

1.本地html与本地html里的js交互 2.本地html与本地js交互 3.网络html与网络js交互 4.网络html与本地js交互 5.各个情况动态添加js 以上5点都可以用一种方式来模拟,在本篇中采用本地html与本地js交互 (包含动态添加js的操作) 6.拦截url请求(在webview加载完成以后,触发的请求url) 7.拦截url请求后返回自己封装的数据(基于第6点,加载完成后,触发一些请求数据的url时拦截并自己封装数据返回给webview) 注:6.7点将在下一篇博客介绍

WebView与Js交互

上周五,老大让暂时搞一个评分app,俩页面.第一个页面显示全部待评分的物业,第二个页面是相应物业的评分页面.评分页面是表格样式的,所以就让web端的同学写个html,我们通过Webview去展示. 这里不不过展示就完了,web页面须要知道我们点击的哪个物业以及所填评委的名字并显示在html上.所以client须要把这两个值传给html.当评委评分完后点击html里的提交button并提交成功后.client也须要进行响应.做法就是client提供接口,js代码去调用来获取值--JS调用Andro

Android原生代码与html5交互

一.首先是网页端,这个就是一些简单的标签语言和JS函数: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; char