android中引用javascript和在javascript中引用java的简单例子

在android中通过微webView是可以加载javascript代码的,与其说是javascript不如说是加载网页,其实就是html和javascript的结合等,通过html和javascript也可以创建安卓应用,因为android和javascript可以相互调用,下面是我介绍的一个简单的例子,大家可以参考。欢迎和大家一起交流。

//允许JavaScript执行
webSettings.setJavaScriptEnabled(true);

// 添加一个对象, 让javascript可以访问该对象的方法,
myWebView.addJavascriptInterface(new WebAppInterface(this),
"myInterfaceName");

//java中调用javascript中的方法
myWebView.loadUrl("javascript:myFunction()");

具体的大家看代码分析吧,这个简单的列子其实很容易明白的

package com.mlf.javascripttest;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;

import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.JsResult;
import android.widget.Button;
import android.widget.Toast;

//@SuppressLint("SetJavaScriptEnabled")
@SuppressLint({ "SetJavaScriptEnabled", "JavascriptInterface" })
public class MainActivity extends Activity {
private WebView myWebView;
private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        myWebView=(WebView) findViewById(R.id.javascriptWebview);
        button=(Button) findViewById(R.id.uttonId);
        WebSettings webSettings=myWebView.getSettings();
        //允许JavaScript执行
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("GBK");
         myWebView.setWebViewClient(new WebViewClient());

         myWebView.setWebChromeClient(new WebChromeClient()
            {

                @Override
                public boolean onJsAlert(WebView view, String url, String message,
                        JsResult result)
                {
                    // TODO Auto-generated method stub
                    return super.onJsAlert(view, url, message, result);
                }

            });
        // 添加一个对象, 让javascript可以访问该对象的方法,
         myWebView.addJavascriptInterface(new WebAppInterface(this),
                    "myInterfaceName");

            // 载入页面:本地html资源文件,放在assets文件夹下
            myWebView.loadUrl("file:///android_asset/javascripttest.html");
            button.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View arg0) {
                    // TODO Auto-generated method stub
                    //java中调用javascript中的方法
                    myWebView.loadUrl("javascript:myFunction()");
                }
            });
    }

         class WebAppInterface{
            Context mContext;
            WebAppInterface(Context c){
                mContext=c;
            }
            public void showToast(String toast){
                Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();            }
         }

}

javascript xml文件

<html>
<head>
<h1>
This is a HTML Page
</h1>
<!-- JavaScript脚本,主要包括了按钮要执行的函数,显示对话框等 -->
<script type="text/javascript">
    //JavaScript方法,弹出对话框显示信息
    function myFunction()
    {
        alert("Hello World!");
    }
    function onAlert()
    {
        console.log("onAlert method");//显示调试信息
        alert("This is a alert sample from html");
    }
    function onConfirm()
    {
        console.log("onConfirm method");
        var b = confirm("are you sure to login?");
        alert("your choice is " + b);
    }
    function onPrompt()
    {
        console.log("onPrompt method");
        var b = prompt("please input your password", "aaa");
        alert("your input is " + b);
    }

    //调用绑定的Java对象的方法,即调用Android代码显示对话框
    function showAndroidToast(toast)
    {
        console.log("showAndroidToast method");
        myInterfaceName.showToast(toast);//注意此处的myInterfaceName要和外部传入的名字一致,大小写正确
    }
</script>
</head>
<body>

    <p>
        <!-- 前四个按钮调用JS函数 -->
        JavaScript函数调用 <br />
        <button onclick="myFunction()">点击这里!</button>
        <br />
        <input type="button" value="alert" onclick="onAlert()" /> <br />
        <input type="button" value="confirm" onclick="onConfirm()" /> <br />
        <input type="button" value="prompt" onclick="onPrompt()" /><br />
        <!-- 上面用了两种定义按钮的方式,效果一样的 -->
    </p>

    <p>
        <!-- 这个Say hello 按钮调用Android代码中的方法 -->
        用JavaScript按钮调用Android代码 <br />
        <input type="button"
            value="Say hello" onClick="showAndroidToast(‘Hello Android!‘)" />
    </p>

    <a href="http://www.google.com" />Google
    </a>

</body>
</html>

布局文件xml

<RelativeLayout 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"
     >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:text="javascript和android相互调用"
        android:textSize="20dp"
        android:gravity="center"
        android:id="@+id/textView1"/>
    <WebView
       android:layout_below="@+id/textView1"
       android:id="@+id/javascriptWebview"
       android:layout_width="match_parent"
       android:layout_height="380dp"/>
    <Button
        android:id="@+id/uttonId"
        android:layout_below="@+id/javascriptWebview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="20dp"
        android:gravity="center"
        android:text="android调用javascript"/>

</RelativeLayout>

谢谢大家参考借鉴,有机会多多交流!欢迎提出疑问,或有新的领先技术学习!

时间: 2024-11-05 01:06:09

android中引用javascript和在javascript中引用java的简单例子的相关文章

JAVA中实现链式操作(方法链)的简单例子

使用链式编程带来的简单 student package jetty; import java.util.stream.IntStream; /** * @Auther: Xiao Yu * @Date: Created in 14:52 2018/3/22 */ public class Student { private Integer id; private Integer age; private String name; private String address; private S

基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的地方或者是描述不足的地方,望大家批评指正,下面是我给我”参考答案“,也只是仅供参考: 1.JavaScript运行在html中,引用有几种方式? 我知道的方法有3种: 第一种:外部引用远程JavaScript文件,如<script type="text/javascript" src

ArcGIS API For Javascript新版本3.11中的新特性

ArcGIS API For Javascript新版本3.11中的新特性: 更简短的引用URL:如果你正在将用以前的版本的程序更新到新版本的话,这是很重要的. To update your code for version 3.11 references, replace the following URLs accordingly: /3.10/js/dojo/ should now read /3.11/ (note the dropped "/js/dojo") 将你的源码更新

【JavaScript】关于JS中的constructor与prototype

最初对js中 object.constructor 的认识: 在学习JS的面向对象过程中,一直对constructor与prototype感到很迷惑,看了一些博客与书籍,觉得自己弄明白了,现在记录如下: 我们都知道,在JS中有一个function的东西.一般人们叫它函数.比如下面的代码 function Person(name)   {     alert(name);   }   Person('js');//js 上面的代码中,Person的表现的确跟一般的函数没有什么区别,接着看下面的代码

JavaScript中的this(你不知道的JavaScript)

JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所以,自己花费了大约2周的时间去查贴.翻阅之前读的书籍,将this的全貌展示如下. 一.this是什么--基于调用位置的上下文:调用位置不同,this值不同. 大家都JavaScript中this存在两个误解: (1)this指向函数自身 (2)this指向函数的作用域 作用域无法通过JavaScri

JavaScript学习12 JS中定义对象的几种方式

JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工厂方式 3.构造函数方式 4.原型("prototype")方式 5.动态原型方式 一.基于已有对象扩充其属性和方法 <script type="text/javascript"> var object = new Object(); object.name

区别script中的type=”text/javascript”和language=”Javascript”

内容提要 在制作网页的时候,往往需要在页面中使用客户端能够运行的JS代码,因此,都需要添加引用.JS引用一般有type="text/javascript"和language="Javascript"两种写法,但language这个属性在W3C的HTML标准中,已不再推荐使用. 具体说明 一般情况下,JS引用方式为: 第①种 <script language="Javascript"></script> 第②种 <sc

javascript之解决dom中存在的空白节点问题

下面有一段html文档 <body> <h1>Introduction to the DOM</h1> <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p> <ul> <li id="everywhere">It can be found everywhere.

nodejs(第三篇):nodejs中的文件模块、nodejs中的require与exports、http模块补充、JavaScript Standard Style

一.nodejs中的文件模块 在nodejs中,用户自己编写的模块,称为文件模块. 文件模块,则是指js文件.json文件或者是.node文件.在引用文件模块的时候后要加上文件的路径:/.../.../xxx.js表示绝对路径../xxx.js表示相对路径(同一文件夹下的xxx.js),../表示上一级目录.如果既不加/.../.../又不加./的话,则该模块要么是核心模块,要么是从一个node_modules文件夹加载. (1)在Node.js中,require是一个方法,只有通过requir