Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
本文实例讲述了Android编程使用WebView实现与Javascript交互的方法。分享给大家供大家参考，具体如下：
Android中可以使用WebView加载网页，同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用。
效果图：
（一）Android部分：
布局代码：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/input_et"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:singleLine="true"
android:layout_weight="1"
android:hint="请输入信息" />
<Button
android:text="Java调用JS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendInfoToJs" />
</LinearLayout>
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Activity代码：
/**
* Android WebView 与 Javascript 交互。
*/
public class MainActivity extends ActionBarActivity {
private WebView webView;
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView) findViewById(R.id.webView);
webView.setVerticalScrollbarOverlay(true);
//设置WebView支持JavaScript
webView.getSettings().setJavaScriptEnabled(true);
String url = "http://192.168.1.27/js_17_android_webview.html";
webView.loadUrl(url);
//在js中调用本地java方法
webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
//添加客户端支持
webView.setWebChromeClient(new WebChromeClient());
}
private class JsInterface {
private Context mContext;
public JsInterface(Context context) {
this.mContext = context;
}
//在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
@JavascriptInterface
public void showInfoFromJs(String name) {
Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
}
}
//在java中调用js代码
public void sendInfoToJs(View view) {
String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
//调用js中的函数：showInfoFromJava(msg)
webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
}
}
（二）网页代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Android WebView 与 Javascript 交互</title>
<head>
<style>
body {background-color:#e6e6e6}
.rect
{
color:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
width:100px;
padding:6px;
background-color:#98bf21;
text-decoration:none;
text-align:center;
border:none;
cursor:pointer;
}
.inputStyle {font-size:16px;padding:6px}
</style>
</head>
<body>
<p>测试Android WebView 与 Javascript 交互</p>
<input id = "name_input" class = "inputStyle" type="text"/>
<a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>
<script>
function sendInfoToJava(){
//调用android程序中的方法，并传递参数
var name = document.getElementById("name_input").value;
window.AndroidWebView.showInfoFromJs(name);
}
//在android代码中调用此方法
function showInfoFromJava(msg){
alert("来自客户端的信息："+msg);
}
</script>
</body>
</html>
更多关于Android相关内容感兴趣的读者可查看本站专题：《Android视图View技巧总结》、《Android开发动画技巧汇总》、《Android编程之activity操作技巧总结》、《Android布局layout技巧总结》、《Android开发入门与进阶教程》、《Android资源操作技巧汇总》及《Android控件用法总结》
希望本文所述对大家Android程序设计有所帮助。
相关推荐
-
Objective-C 代码与Javascript 代码相互调用实例
现在好的IOS 的 APP有时候会跟网页内容相关联,当然也是增加用户体验,及更好的,有效的体现APP 的功能. 由于本人在项目中会用到这部分功能,做下记录! JS调用OC 很多应用里面或多或少的调用了网页,来达到绚丽的效果,所谓的JS调用OC.....举个例子吧,网页上有个按钮 点击按钮跳转界面,跳转的动作由OC的代码实现. OC调用JS 还是举个例子,我们OC代码创建了输入框比如输入用户名,输入完成后显示在网页上,显示用户的用户名 一.利用webView的代理方法实现OC和JS的相互调用 创建
-
基于js里调用函数时,函数名带括号和不带括号的区别
示例代码: <span style="font-size:18px;">function hi(){ var a = 1; return function(){ console.log(a++); }; }; var aaa = hi(); var bbb = hi; </span> 如以上代码: aaa 是将 hi() 的运行结果赋值给它,即 return 返回的匿名函数,此时有一个闭包,则每次调用 aaa 时都访问的同一个 a,aaa() 第一次运行结果为
-
JS中使用apply方法通过不同数量的参数调用函数的方法
apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu
-
Android WebView的使用方法及与JS 相互调用
Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m
-
Javascript调用函数方法的几种方式介绍
javascript语法灵活,同一个功能有五六种实现方式并不罕见,然后再加上有些反人类的原型继承和异步特性,就更让人一头雾水了.我经常搞不清楚call,apply之间的区别,今天就记录一下,以免再忘了. 在javascript中,方法可以通过以下几种方式执行: 1.func(),这是最直接最常见的调用方式,也符合一般人的思维逻辑,但是在某些情况下有一些不足,下面会解释. 2.(function(arg){})(window),匿名方法调用,在构造命名空间时比较有用,后面的括号中的参数与匿名方法中
-
JavaScript中调用函数的4种方式代码实例
1:方法调用模式 var myObj = {//对象字面量 param1: 1, param2: 2, sum: function (){ //this关键字只带当前的对象 return this.result = this.param1 + this.param2; } } myObj.sum(); //=>3 2:函数调用模式 var add = function(a, b){ return a + b; } //函数调用模式 add(1,2); //=>3 还可以 function ad
-
一个Js文件函数中调用另一个Js文件函数的方法演示
我们知道,在html中,利用<script language="javascript" type="text/javascript" src="./script.js"></script>引入的两个js是不可以相互调用的.那么该如何解决呢?当然,你可以将代码通通copy过来,也许你并不喜欢这样. 例如有这样一个html,里面有一个按钮,当按下时调用b.js文件中的方法b().而b()中又要调用a.js文件中的方法a().若
-
浅谈js中子页面父页面方法 变量相互调用
(1)子页面调用父页面的方法或者变量: window.parent.方法()或者变量名 window.parent相当于定位到父页面 之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如:想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById(&q
-
Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
本文实例讲述了Android编程使用WebView实现与Javascript交互的方法.分享给大家供大家参考,具体如下: Android中可以使用WebView加载网页,同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用. 效果图: (一)Android部分: 布局代码: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu
-
Android编程使用WebView实现文件下载功能的两种方法
本文实例讲述了Android编程使用WebView实现文件下载功能的两种方法.分享给大家供大家参考,具体如下: 在应用中,通常会使用到文件下载功能,一般我们都是写一个下载操作工具类,在异步任务中执行下载功能. 今天我们来看下如何使用WebView的文件下载功能! 方法1,自定义下载操作 1. 先来布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu
-
Android编程实现WebView全屏播放的方法(附源码)
本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.
-
Android编程实现webview将网页打包成apk的方法
本文实例讲述了Android编程实现webview将网页打包成apk的方法.分享给大家供大家参考,具体如下: 功能非常简单,而且乍一看没什么特别大的用处,因为实际上就是浏览器而已...但如果说网页一开始就是针对手机开发的呢?是不是可以将android的开发转变为网页的开发了?有待研究,不过据说也可以用这种方法将html5打包哦,先记录一下可能以后也可以赶下潮流. public class MainActivity extends Activity { private WebView webvie
-
Android编程实现WebView添加进度条的方法
本文实例讲述了Android编程实现WebView添加进度条的方法.分享给大家供大家参考,具体如下: 标准的XML界面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
-
Android编程使WebView支持HTML5 Video全屏播放的解决方法
本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr
-
Android编程实现webview执行loadUrl时隐藏键盘的workround效果
本文实例讲述了Android编程实现webview执行loadUrl时隐藏键盘的workround效果.分享给大家供大家参考,具体如下: webview执行loadUrl时隐藏键盘的workround 在写webapp的时候,经常需要用JS调用Java方法,java方法执行完毕以后,再回调JS函数来做一些事情,而webview调用js的时候是通过loadUrl方法的,一执行loadUrl就会隐藏软键盘.因为每次loadUrl操作都会调用clearHelpers方法 clearHelpers方法中
-
Android编程实现WebView自适应全屏方法小结
本文实例讲述了Android编程实现WebView自适应全屏的方法.分享给大家供大家参考,具体如下: 第一种: settings.setUseWideViewPort(true); settings.setLoadWithOverviewMode(true); 第二种: WebSetting settings = webView.getSettings(); settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); 把所有内容放在we
-
Android编程ProgressBar自定义样式之动画模式实现方法
本文实例讲述了Android编程ProgressBar自定义样式之动画模式实现方法.分享给大家供大家参考,具体如下: 忘记在哪里看到的那位仁兄写的,就是通过用动画效果来实现的,现在顺便也把他写出来,希望那位仁兄不要见怪. 效果: 和之前的一样,在布局文件中: <ProgressBar android:id="@+id/progressBar3" android:layout_width="wrap_content" android:layout_height=
-
Android编程实现读取本地SD卡图片的方法
本文实例讲述了Android编程实现读取本地SD卡图片的方法.分享给大家供大家参考,具体如下: private Bitmap getDiskBitmap(String pathString) { Bitmap bitmap = null; try { File file = new File(pathString); if(file.exists()) { bitmap = BitmapFactory.decodeFile(pathString); } } catch (Exception e)