在WebView中使用JavaScript

  如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript。

  一旦使能之后,你也可以自己创建接口在你的应用和JavaScript代码间进行交互。

前情提要:使能JavaScript

  上一篇文章已经说过,可以通过getSettings()获得WebSettings,然后用setJavaScriptEnabled()使能JavaScript:

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

绑定JavaScript与Android代码

  当你为你的Android应用中的WebView专门开发一个网页应用时,你可以创建你的JavaScript代码和你的客户端的Android代码之间的接口。

  比如,你可以用JavaScript代码调用Android代码中的方法,来展现一个对话框之类,而不是使用alert()方法(JS中的对话框方法)。

  在JS和Android代码间绑定一个新的接口,需要调用 addJavascriptInterface()方法。

  方法参数传入一个Java对象实例和一个字符串,该字符串是一个名字(interface name,注意此接口不是通常所说的那个用来实现的接口,而是传入的这个对象在JS中的别名),在JS代码中用此名字调用该Java对象的方法。

  

  注意这个方法可以让JS代码控制宿主程序,这是一个非常有力的特性,但是同时也存在一些安全问题,因为进一步JS代码可以通过反射访问到注入对象的公有域。攻击者可能会在HTML和JavaScript中包含了有威胁性的代码。

  所以Android 4.1,API 17,也就是JELLY_BEAN 开始,只有被JavascriptInterface 注解标识的公有方法可以被JS代码访问。

  另外,因为JS代码和Java对象在这个WebView所私有的后台线程交互,所以还需要注意线程安全性问题。

  注意,与JS代码绑定的的这个Java对象运行在另一个线程中,与创建它的线程不是一个线程。

  注意,这个Java对象的域是不可访问的。

绑定JavaScript与Android代码的例子

  比如可以定义这么一个类:

    /**
     * 自定义的Android代码和JavaScript代码之间的桥梁类
     *
     * @author 1
     *
     */
    public class WebAppInterface
    {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c)
        {
            mContext = c;
        }

        /** Show a toast from the web page */
        // 如果target 大于等于API 17,则需要加上如下注解
        // @JavascriptInterface
        public void showToast(String toast)
        {
            // Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
            Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
        }
    }

  然后将这个类和你的WebView中的JS代码绑定:

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

  给这个对象起的别名叫“Android”。

  这个就创立了一个接口名,叫“Android”,运行在WebView中的JS代码可以通过这个名字调用WebAppInterface类中的showToast()方法:

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

<script type="text/javascript">
    function showAndroidToast(toast)
    {
        Android.showToast(toast);
    }
</script>

特别注意:需要设置chrome handler

  这个问题让我纳闷了好久,因为开始的时候我写的程序,JS代码中的按钮会出现在WebView中,但是点击下去后,不会弹出相应的对话框之类。

  也就是说JS代码调用自己也没有执行?

  同样的代码在别的地方执行可以正常弹出啊。所以我还提问来着:http://q.cnblogs.com/q/47060/

  后来找了半天原因,才发现两个问题:

  1.网页按钮按下后不出现JS对话框是因为没有设置chrome handler,需要设置如下: 

        // 如果不设置这个,JS代码中的按钮会显示,但是按下去却不弹出对话框
        // Sets the chrome handler. This is an implementation of WebChromeClient
        // for use in handling JavaScript dialogs, favicons, titles, and the
        // progress. This will replace the current handler.
        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);
            }

        });

  

  2.调用Android代码的那个按钮也没有出现Toast是因为我把别名写错了(大小写没有注意)。(这个错误可以忽略,但是大家也要引以为戒。。Orz。。。)

Android调用JavaScript代码

  这个还比较简单,需要调用的时候只需要一行代码:  

myWebView.loadUrl("javascript:myFunction()");

  其中myFunction()是JS函数。

  这里要补充一下,如果JavaScript函数是带参数的,那么调用时要特别注意。

  比如下面这个JS函数,在原来内容上加入一行:

    function writeLine(string)
    {
        console.log("Write a new Line");//调试信息
        document.getElementById("content").innerHTML += string + "<br />";//在content标签段落加入新行
    }

  注:其中content是自定义的标签,html中有一个段落是:

    <p id="content"></p>

  那么在Android代码中调用这个writeLine()函数时,需要传入一个字符串参数,比如,想要传入一个叫name的String:

myWebView.loadUrl("javascript:writeLine('"+name+"')");//JS代码要是带参数

  还有就是要注意双引号中的函数名一定不要写错。

程序实例

  做了一个程序:

  界面中包含一个TextView,旁边一个Button,下面整个是一个WebView。

  在WebView中载入了一个本地html文件,本地文件存放在assets文件夹中。

  网页中前四个按钮调用的是JavaScript函数,显示各种对话框。

  SayHello按钮调用Android代码中的一个方法,显示一个Toast,如图中所示。

  为了证明Android也可以调用JS代码,最上方的Android Button按下后和“点击这里”那个按钮的效果一致,都是出现JS的对话框。

Activity代码:

package com.example.hellowebjs;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

public class WebJSActivity extends Activity
{

    private WebView myWebView = null;
    private Button myButton = null;

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_js);

        myWebView = (WebView) findViewById(R.id.myWebView);

        // 得到设置属性的对象
        WebSettings webSettings = myWebView.getSettings();

        // 使能JavaScript
        webSettings.setJavaScriptEnabled(true);

        // 支持中文,否则页面中中文显示乱码
        webSettings.setDefaultTextEncodingName("GBK");

        // 限制在WebView中打开网页,而不用默认浏览器
        myWebView.setWebViewClient(new WebViewClient());

        // 如果不设置这个,JS代码中的按钮会显示,但是按下去却不弹出对话框
        // Sets the chrome handler. This is an implementation of WebChromeClient
        // for use in handling JavaScript dialogs, favicons, titles, and the
        // progress. This will replace the current handler.
        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调用Android函数:
        // 先建立桥梁类,将要调用的Android代码写入桥梁类的public函数
        // 绑定桥梁类和WebView中运行的JavaScript代码
        // 将一个对象起一个别名传入,在JS代码中用这个别名代替这个对象,可以调用这个对象的一些方法
        myWebView.addJavascriptInterface(new WebAppInterface(this),
                "myInterfaceName");

        // 载入页面:本地html资源文件
        myWebView.loadUrl("file:///android_asset/sample.html");

        // 这里用一个Android按钮按下后调用JS中的代码
        myButton = (Button) findViewById(R.id.button1);
        myButton.setOnClickListener(new View.OnClickListener()
        {

            @Override
            public void onClick(View v)
            {
                // 用Android代码调用JavaScript函数:
                myWebView.loadUrl("javascript:myFunction()");

                // 这里实现的效果和在网页中点击第一个按钮的效果一致

            }
        });

    }

    /**
     * 自定义的Android代码和JavaScript代码之间的桥梁类
     *
     * @author 1
     *
     */
    public class WebAppInterface
    {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c)
        {
            mContext = c;
        }

        /** Show a toast from the web page */
        // 如果target 大于等于API 17,则需要加上如下注解
        // @JavascriptInterface
        public void showToast(String toast)
        {
            // Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
            Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();
        }
    }

}

  HTML文件:

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

  Activity布局文件:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/myRelativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="@dimen/padding_medium"
        android:text="@string/hello_world"
        tools:context=".WebJSActivity" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView1"
        android:text="@string/btn1_text" />

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/textView1" />

</RelativeLayout>

Android WebView中的JavaScript代码使用的更多相关文章

  1. UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等)

    UWP 中使用 WebView 时可以在网页中额外执行一些代码.于是你几乎可以在网页上做任何事情,那些你可以在浏览器控制台中做的事情. 本文将介绍做法. 本文内容 准备环境 执行 JavaScript ...

  2. python中执行javascript代码

    python中执行javascript代码: 1.安装相应的库,我使用的是PyV8 2.import PyV8 ctxt = PyV8.JSContext()     ctxt.enter()     ...

  3. JAVA中执行JavaScript代码并获取返回值

    JAVA中执行JavaScript代码并获取返回值 场景描述 实现思路 技术要点 代码实现 测试方法 运行结果 改进空间 场景描述 今天在CSDN上偶然看到一个帖子对于一段字符串 “var p=‘xx ...

  4. iOS的WebView中使用javascript调用原生的api

    1. 首先在javascript中加入相关代码 $('.content .saveCode').on('touchstart', function () {//touchstart if (temp ...

  5. Android Webview中解决H5的音视频不能自动播放的问题

    在开发webview的时候,当加载有声音的网页的时候,声音不会自动播放, 解决方法:在webview中调用js方法.这个方法需要在webview的setWebViewClient方法之后在onPage ...

  6. 在HTML标签&lt;a/&gt;中调用javascript代码

    <a/>标签的“href”属性可以是一个有效的URL,表示跳转的目的地,除此之外,href还可以是一段javascript代码.当为“href”设置javascript代码时,格式如下:& ...

  7. C# 代码中调用 Javascript 代码段以提高应用程序的配置灵活性(使用 Javascript .NET 与 Jint)

    一般来说,我们需要在开发应用软件的配置文件中,添加一些参数,用于后续用户根据实际情况,自行调整. 配置参数,可以放在配置文件中.环境变量中.或数据库表中(如果使用了数据库的话).通常,配置数据,以 k ...

  8. Android WebView中那些不得不解决的坑~~

    前面那张hybrid开发心得 有人问 怎么解决不用onJsPrompt 来回调js函数的问题.其实很简单,就是在在你的jscalljava回调函数内 另外开个线程去load js代码即可: wb.po ...

  9. Android webview中cookie增加/修改

    最近项目需求中,需要满足往webview传递cookie,而且cookie需要增加修改: public class MainActivity extends Activity { private We ...

随机推荐

  1. 业务人员自助BI分析不够用,还要自助数据准备?

    自助式BI工具,可以帮助业务人员充分了解和利用企业数据,通过可视化操作,拖拖拽拽来新建分析,生成可视化的报表,帮助企业决策.但近几年的调查研究发现,拥有强大分析策略和模型的产品,比如Tableau.q ...

  2. 使用 Eclipse 调试 Java 程序的 10 个技巧

    你应该看过一些如<关于调试的N件事>这类很流行的帖子 .假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方 ...

  3. vue transition

    Vue.js 教程 (9) : 过渡动画 Vue.js 提供非常简单的过渡动画接口.这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行.能够触发动画的指令包括 v-if , ...

  4. [Java] 读写字节数据,过滤流DataOutputStream和DataInputStream

    package test.stream; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io ...

  5. 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。

    1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...

  6. 14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小

    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小 改变 InnoDB ...

  7. iframe,modaldialog父子窗口相互通信的问题

    --- 子窗口访问父窗口的window对象 --- 打开新窗口一般有几种方法,window.open(...),window.showModalDialog(...),以及iframe中嵌套页面,另外 ...

  8. maven GroupID和ArtifactID填什么

    GroupID是项目组织唯一的标识符,实际对应JAVA的包的结构,是main目录里java的目录结构. ArtifactID就是项目的唯一的标识符,实际对应项目的名称,就是项目根目录的名称.一般Gro ...

  9. Struts1.x 环境搭建和技术准备(上)

    Struts 1.x 基于 Servlet,Struts 2.x基于Filter 1.servlet的注解配置方式和web.xml配置方式 使用servelt 3.0,eclipse在创建seb项目是 ...

  10. 2238&quot;回文字串&quot;报告

    题目描述: 回文串,就是从前往后和从后往前看都是一样的字符串.那么现在给你一个字符串,请你找出该字符串中,长度最大的一个回文子串. 输入描述: 有且仅有一个仅包含小写字母的字符串,保证其长度不超过50 ...