WebView中的JavaScript代码使用 setWebChromeClient

2024-05-12 07:38
文章标签 java 代码 使用 script webview setwebchromeclient

本文主要是介绍WebView中的JavaScript代码使用 setWebChromeClient，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上一篇博文：Android WebView使用基础已经说了一些Android中WebView的基本使用。

　　本篇文章主要介绍WebView中的JavaScript代码的执行相关，已经JS代码与Android代码的互相调用。

　　（因为本人对Web开发并不是很熟悉，所以如果有哪些地方说得不对，还请指正。）

 

在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，则需要加上如下注解// @JavascriptInterfacepublic 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(){@Overridepublic boolean onJsAlert(WebView view, String url, String message,JsResult result){// TODO Auto-generated method stubreturn 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")@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_web_js);myWebView = (WebView) findViewById(R.id.myWebView);// 得到设置属性的对象WebSettings webSettings = myWebView.getSettings();// 使能JavaScriptwebSettings.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(){@Overridepublic boolean onJsAlert(WebView view, String url, String message,JsResult result){// TODO Auto-generated method stubreturn 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(){@Overridepublic 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，则需要加上如下注解// @JavascriptInterfacepublic 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" ><TextViewandroid: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" /><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/textView1"android:text="@string/btn1_text" /><WebViewandroid:id="@+id/myWebView"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@id/textView1" /></RelativeLayout>
复制代码

 

 

参考资料

　　Web学习网站：

　　http://www.w3school.com.cn/

　　API Guides:  Building Web Apps in WebView

　　http://developer.android.com/guide/webapps/webview.html

 

 

 

这篇关于WebView中的JavaScript代码使用 setWebChromeClient的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/982001。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2