Android与JS的交互简单实现

http://blog.csdn.net/carson_ho/article/details/64904691

WebView设置

// 将JavaScript设置为可用,这一句话是必须的,不然所做一切都是徒劳的

webSettings.setJavaScriptEnabled(true);

// 在webview中打开链接

myWebView.setWebViewClient(newWebViewClient());

..........

webview使用总结

概述:

既然是Android与JavaScript的交互.心中可定有疑问.

1,js如何调用android的代码,准确来说应该是webview如何调用

2.android如何调用js的代码

第一:js调用android代码

1.首先来一段最最简单的jsp代码

<body>

<p>WebView与Javascript交互</p>
<div><button onClick="window.android.actionFromJs()">点击调用Android代码</div>

<br/>

<div><button onClick="window.android.actionFromJsWithParam(' data come from Js')">点击调用Android代码并传递参数</div>

<br/>

<div id="log_msg">调用打印信息</div>

</body>

如果我们想实现交互.还要对webview就行一些设置:

// 启用javascriptmWebView.getSettings().setJavaScriptEnabled(true);

/** 为webview添加注册js 接口回调监听.

* 参数一: 接口对象

* 参数二: 接口别名(别名让js代码使用)

* 如果别名写"haha". 那么js中就要写window.haha.方法名

*/

mWebView.addJavascriptInterface(this,"android");

2.来看android怎么写

/**

* js调用此方法

*/@android.webkit.JavascriptInterface 、

public void actionFromJs() {

runOnUiThread(new Runnable() {

@Override public void run() {

Toast.makeText(MainActivity.this,"js调用了Android函数", Toast.LENGTH_SHORT).show();

String text = logTextView.getText() +"\njs调用了Android函数";

logTextView.setText(text);

}

});

}/**    * js调用此方法. 并且将参数传递过来    *    *@paramstr js  传递过来的参数    */@android.webkit.JavascriptInterface 

public void actionFromJsWithParam(final String str) {

runOnUiThread(new Runnable() {

@Override public void run() {

Toast.makeText(MainActivity.this,"js调用了Android函数传递参数:"+ str, Toast.LENGTH_SHORT).show();

String text = logTextView.getText() +"\njs调用了Android函数传递参数:"+ str;

logTextView.setText(text);

}

});

}

actionFromJs(),actionFromJsWithParam(final String str)方法就是我们在android代码中定义好的方法.以供js去调用.

注意: 要想让js调用必须在方法名上加注解

@android.webkit.JavascriptInterface

哦.js掉用android已经搞定


第二:android调用js代码

android调用js代码那就更加简单了.

首先我们肯定要有js代码:

<html>

<head>

<script type="text/javascript">

// 无参方法

function actionFromNative(){

document.getElementById("log_msg").innerHTML+="Android调用了js函数";

}

//有参方法function actionFromNativeWithParam(arg){

document.getElementById("log_msg").innerHTML += ("Android调用了js函数并传递参数:"+ arg);

}

</script>

</head>

</html>

其次:android代码调用方法

/**

*  调用js.

*  WebView.loadUrl("javascript:js中定义的方法")

*/button.setOnClickListener(new Button.OnClickListener() {

public void onClick(View v) {

// 无参数调用  android端调用js 方法mWebView.loadUrl("javascript:actionFromNative()");

// 传递参数调用mWebView.loadUrl("javascript:actionFromNativeWithParam("+"'come from Native'"+")");

}

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,420评论 25 708
  • 一、js和Android调用的前提 在讲js和Android的互调之前,我们要先设置好webview的一些基本配置...
    Hawkinswang阅读 7,923评论 0 14
  • 现在越来越多的App是混合开发,很需要原生与网页交互,下面介绍如何交互以及有可能出现的坑。 Java调用JS方法 ...
    辩护人阅读 8,852评论 0 30
  • JSBridge 1. Why do we need JSBridge? 2. Why is “JS”Bridge...
    loveqin阅读 9,239评论 0 7
  • 记得有次遇到一个藏族的女学生怀孕5个多月,因为还在读书,没有条件要孩子,于是准备引产。当她打引产针的时候,她的泪...
    精进的医生阅读 259评论 -1 1