Android和JavaScript简单交互的例子

通过WebView,可以在JavaScript代码和客户端的Android代码间创建接口。例如,Android可以获取JavaScript里的输入。为了在你的JavaScript和Android代码间绑定一个新的接口,需要调用addJavascriptInterface(),传给它一个类实例来绑定到JavaScript,还需要一个接口名让JavaScript可以调用,以便来访问类。下面举个简单例子;

html文件:

<!DOCTYPE HTML>

<html xmlns=”http://www.w3.org/1999/xhtml” debug=”true”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<meta name=”viewport”
content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″>
<meta name=”apple-mobile-web-app-capable” content=”yes”>
<meta name=”viewport” content=”target-densitydpi=device-dpi”/>
<script type=”text/javascript”>
function init()
{
var testVal = document.getElementById(‘mytextId’).value;
AndroidFunction.showToast(testVal);
}

</script>
</head>
<body>
<div style=”float: left;width: 50%;”>
<input type=”text” style=”width: 180px;”
name=”myText” id=”mytextId”/>

</div>
<div style=”clear: both;height: 3px;”></div>
<div>
<input value=”submit” type=”button” name=”submit”
id=”btnSubmit” onclick=”javascript:return init();”/>
</div>
</body>
</html>

android布局xml文件:

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:context="com.example.zmit.webview.MainActivity"></pre>
<pre> <WebView
     android:id="@+id/wv1"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:layout_weight="0.5"
     />
 
<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical"
 android:layout_weight="1">
<TextView
 
 android:id="@+id/textView1"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout></pre>
<pre></LinearLayout>
代码:

public class MainActivity extends AppCompatActivity {
 
    WebView wView;
    private TextView myTextView;
    final Handler myHandler = new Handler();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        wView = (WebView) findViewById(R.id.wv1);
        myTextView = (TextView) findViewById(R.id.textView1);
        final JavaScriptInterface myJavaScriptInterface
                = new JavaScriptInterface(this);//交互接口
        wView.getSettings().setJavaScriptEnabled(true);
 
      wView.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");
 
        wView.loadUrl("file:///android_asset/untitled.html");
 
    }
 
    public class JavaScriptInterface {
 
        Context mContext;
 
        JavaScriptInterface(Context c) {
            mContext = c;
        }
        
        @JavascriptInterface
        public void showToast(String webMessage){
            final String msgeToast = webMessage;
            myHandler.post(new Runnable() {
                @Override
                public void run() {
                    myTextView.setText(msgeToast);
                }
            });
 
            Toast.makeText(mContext, webMessage, Toast.LENGTH_SHORT).show();
        }
    }
 
}

效果如下所示

时间: 2024-10-21 15:04:10

Android和JavaScript简单交互的例子的相关文章

Javascript与Android和ios进行交互的例子

一.对于Android和ios我们要执行不同的操作,下面是判断系统的js代码 // alert(ismobile(1)); 1表示Android,0表示ios function ismobile(test){  var u = navigator.userAgent, app = navigator.appVersion;  if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|

Android与Javascript交互示例(一)

MainActivity如下: package cn.testjavascript; import android.os.Bundle; import android.webkit.WebChromeClient; import android.webkit.WebView; import android.app.Activity; /** * Demo描述: * JavaScript调用Android中的方法 * 即点击Html中按钮,调用Android中的方法 * * 参考资料: * htt

Android与Javascript交互示例(二)

MainActivity如下: package cn.testjavascript; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.webkit.WebView; import android.widget.Button; import android.app.Activity; /** * Demo描述: * JavaScr

Android webview与javascript的交互以及代码混淆

问题描述 Android webview与javascript的交互以及代码混淆 本来是一切正常的,但是在代码混淆打包出来之后,webview页面上的一级按钮是可以点击,点击之后弹出的二级按钮就失去的点击,点击没有任何反应?这是不是混淆出现的问题,该怎么解决? 解决方案 作为与javascript交互的bridge类不要加入混淆.

Android与Javascript交互示例(三)

MainAcivity如下: package cn.testjavascriptdialog; import android.os.Bundle; import android.app.Activity; import android.app.AlertDialog; import android.app.AlertDialog.Builder; import android.app.Dialog; import android.content.DialogInterface; import a

android javascript:android与javascript相互调用

               下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jquery mobile等.相信未来随着web app的发展我们同样可以使用html设计出和本地应用一样漂亮的界面.这些虽然很美好,但是现在还有很多弊端,比如比本地框架调用慢的多,因为手机是受限的设备,所以处理起来和反应都是比较慢的,期望未来会有较大的发展.哈哈!      

移动设备上简单交互的设计解决方案和展示

用户访问移动网站不仅仅是为了浏览内容,而是要做成事情.以订机票为例,用户经常在航空公司的移动网站上做的事有:查询航班状态.查询特定航班.搜索并预定机票.那么移动互联网用户界面设计是怎样支持任务完成呢?在移动网站上传达信息和展示交互状态的最优方式又是怎样?带着寻找移动设备简单交互的最有设计方案的目的,我以查询航班状态为例来进行研究.希望我的分析能对这个主题有所贡献. 交互:查询航班状态 旅行者可以通过确定出发日期,或者是输入航班号,或者是出发城市和到达城市或是机场来查询到航班状态.听起来够简单,对

Javascript iframe交互并兼容各种浏览器的解决方法_javascript技巧

在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

入侵检测-关于一个简单的堆栈例子

问题描述 关于一个简单的堆栈例子 我在读一本入侵检测技术的书,看到一个简单的堆栈溢出示例,看不懂,请各位大神解释一下是什么意思 解决方案 简单说就是通过程序编写的不严格,使局部变量溢出从而覆盖掉堆栈上的返回值.调用一个函数时,以__stdcall为例,先把参数入栈,然后时返回地址入栈, CPU执行现场跳转到函数中 ,然后是ebp寄存器入栈,随后局部变量和寄存器入栈,不同的编译器可能会有所差别,比如微软CL编译器在处理Debug和Release时是有一些区别的,但大致是相同的,溢出攻击,简单说就是