android webview和js的交互

第一步:

mainfest.xml中加入网络权限

<use-permission android:name="android.permission.INTERNET"/>

如果是访问本地的那就不需要加这个权限了

第二步:

加载本地写好的html文件(定义好js中提供给android调用的方法funFromjs(),和android提供给js调用的对象接口) fun1FromAndroid(String name)),放在assets目录下。

eg.

<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本地方法

myObj.fun1FromAndroid("调用android本地方法fun1FromAndroid(String name)!!");

return false;

}, false);

</script>

<p></p>

<div id="helloweb">

</div>

</body>

第三步:

实现android工程与js交互的相关代码

android主题代码:

eg.

@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//初始化

initViews();

//设置编码

mWebView.getSettings().setDefaultTextEncodingName("utf-8");

//支持js

mWebView.getSettings().setJavaScriptEnabled(true);

//设置背景颜色 透明

mWebView.setBackgroundColor(Color.argb(0, 0, 0, 0));

//设置本地调用对象及其接口

mWebView.addJavascriptInterface(new JavaScriptObject(mContext), "myObj");

//载入js

mWebView.loadUrl("file:///android_asset/test.html");

//点击调用js中方法

mBtn1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

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

Toast.makeText(mContext, "调用javascript:funFromjs()", Toast.LENGTH_LONG).show();

}

});

}

js调用的android对象方法定义

public class JavaScriptObject {

Context mContxt;

@JavascriptInterface //sdk17版本以上加上注解

public JavaScriptObject(Context mContxt) {

this.mContxt = mContxt;

}

public void fun1FromAndroid(String name) {

Toast.makeText(mContxt, name, Toast.LENGTH_LONG).show();

}

public void fun2(String name) {

Toast.makeText(mContxt, "调用fun2:" + name, Toast.LENGTH_SHORT).show();

}

}

注意:api16以后需要在调用的本地方法上加注解@JavascriptInterface

【注意事项】

1.AndroidManifest.xml中必须使用许可"android.permission.INTERNET",否则会出Web page not available错误。

2.如果访问的页面中有Javascript,则webview必须设置支持Javascript。webview.getSettings().setJavaScriptEnabled(true);

3.如果页面中链接,如果希望点击链接继续在当前browser中响应,而不是新开Android的系统browser中响应该链接,必须覆盖 webview的WebViewClient对象。

4.对于第一点, 如果使用Android SDK提供了一个schema,前缀为"file:///android_asset/"。WebView遇到这样的schema,会去加载assets 目录下的资源。如"file:///android_asset/demo.html",可不必使用许 可"android.permission.INTERNET"。

  • WebView开启JavaScript脚本执行
  • WebView设置供JavaScript调用的交互接口。
  • 客户端和网页端编写调用对方的代码。
  • Java和js交互有以下一些特点:

1.Java 调用 js 里面的函数,速度并不令人满意,大概一次一两百毫秒吧,如果要做交互 性很强的事情,这种速度会让人疯掉的。而反过来就不一样了, js 去调 java 的方法,速度很快,基本上 40-50 毫秒一次。所以尽量 用 js 调用 java 方法,而不是 java 去调用 js 函数。

2.Java 调用 js 的函数,没有返回值,而 Js 调 用 java 方法,可以有返回值。返回值可以是基本类型、字符串,也可以是对象。如果是字符串,有个很讨厌的问题,第 3 点我会讲的。如果是对象,这 个对象会被转换为 js 的对象,直接可以访问里面的方法。但是我不推荐 java 返回给 js 的是对象,除非是必须。因为 js 收 到 java 返回的对象,会产生一些交换对象,而如果这些对象的数量增加到了 500 或 600 以上,程序就会出问题。所以尽量返回基本数据类型或 者字符串。

3.Js 调用 Java 的方法,返回值如果是字符串,你会发现这个字符串是 native 的,不能对它进行一些修改操作, 比如想对它 substr ,取不到。怎么解决呢?转成 locale 的。使用 toLocaleString() 函数就可以了。不过这个函数的速度 并不快,转化的字符串如果很多,将会很耗费时间。

WebViewClient主要帮助WebView处理各种通知、请求事件的,比如:

  • onLoadResource
  • onPageStart
  • onPageFinish
  • onReceiveError 等

WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比如:

  • onCloseWindow(关闭WebView)
  • onCreateWindow()
  • onJsAlert (WebView上alert无效,需要定制WebChromeClient处理弹出)
  • onJsPrompt
  • onJsConfirm
  • onReceivedTitle等

一个简单的demo

时间: 2024-10-12 18:45:47

android webview和js的交互的相关文章

webview与JS的交互

一:hybird app, web app 和 native app 的区别   Web App Hybird App 混合Native App 开发成本 低 中 高 维护更新 简单 简单 复杂 体验 差 优 优 跨平台 优 优 差 Native App是一种基于智能手机本地操作系统如IOS,Android等并运用原生程序编写运行的第三方运用程序,也叫本地App. Web App 是针对Iphone,Android优化后的web站点,前端使用的技术是:html5,css,javascript等,

安卓webview和js+html交互利用的addJavascriptInterface和webview.loadUrl(&quot;javascript:**&quot;);

近期做一个项目需要把一个 服务支持的界面用webview来显示..呀 html白雪了js更是一样啥也不会,相信很多初学屌丝员跟我一样,, html开发工具都不知道怎么写..哈哈哈.....现在把做完的结果分享一下先上图了 ,, 这是从项目中特意分离出来的demo这里之上一些关键代码 源码下载地址  http://download.csdn.net/download/yung7086/7554309 步骤 首先在assets目录下建一个html文件 <!DOCTYPE html PUBLIC &quo

android code 和js的交互

小弟现在需要android code 和js的交互.出现了问题,求大家带一带啊. 我的页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,

[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

Android WebView与服务端交互Demo

使用WebView可以让Android端的开发工作大量减少,原因是在服务端可以为其做一定的工作,下面这个小Demo就实现了从Android客户端与服务端的交互.我这里客户端使用的工具是Eclipse,服务端使用MyEclipse. 实现效果图: 客户端: 点击登录按钮后,页面跳转,而在服务端Console中看到如下(只看最后一行即可): 可以看到服务端收到了客户端发过来的用户名:yao. 源代码: 客户端: activity_main: <RelativeLayout xmlns:android

android webview与js简单的交互方案

最近研究webview与js交互,看了几个开源库实现,感觉不尽如人意,存在主要问题是,耦合较高,使用不够简洁,后来参考Uri设定规则,格局Uri类似协议自定义了类似的js交互协议 比较简洁,自定义协议内容样式如:jsbridge://android-app/method123?a=123&b=345#jsMethod1(p1,p2) 协议说明: scheme定义为jsbridge,用于区分别的网络请求(http),authority定义为android-app,区分不同平台处理path定义为 调

Android WebView与JS的交互方式 最全面汇总

前言 现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝.京东.聚划算等等,如下图 上述功能是由Android的WebView实现的,其中涉及到Android客户端与Web网页交互的实现 今天我将全面介绍Android通过WebView与JS交互的全面方式 阅读本文前请先阅读:Android开发:最全面.最易懂的Webview详解 目录 1. 交互方式总结 Android与JS通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用

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点将在下一篇博客介绍

Android webview与js交互

记录别人的几篇地址: http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html http://www.cnblogs.com/mengdd/archive/2013/03/02/2940185.html http://blog.csdn.net/cappuccinolau/article/details/8262821