展会信息港展会大全

android开发WebView中的JavaScript代码使用
来源:互联网   发布日期:2015-10-02 21:27:01   浏览:2566次  

导读:因项目需要,要在android界面加入webView然后实现互调,百度之后就写了一个Demo用于项目。不多说了 直接上代码!simple htmlhtmlheadh1This is a HTML Page h1!-- JavaScript脚本,主要包括了按钮 ...

因项目需要,要在android界面加入webView然后实现互调,百度之后就写了一个Demo用于项目。

不多说了 直接上代码!

simple.html

<html>

<head>

<h1>

This is a HTML Page

</h1>

<!-- JavaScript脚本,主要包括了按钮要执行的函数,显示对话框等 -->

<script type="text/javascript">

//JavaScript方法,弹出对话框显示信息

function myFunction()

{

alert("调用html的弹框");

document.getElementById("test").innerHTML="<span>my</span>";

}

function onAlert()

{

console.log("onAlert method");//显示调试信息

alert("调用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)

{

myInterfaceName.showToast(toast);//注意此处的myInterfaceName要和外部传入的名字一致,大小写正确

}

function myHtmlTest()

{

alert("Android 调用html弹框方法");

}

</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('Html的按钮调用Android方法')" />

</p>

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

</a>

</br>

<span id="test">ShowTest</span>

</body>

</html>

activity_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:layout_height="match_parent"

android:orientation="vertical" >

<Button

android:id="@+id/dojs_click_btn"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="点击此处调用js里面的方法"

android:layout_marginTop="10dp"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="上面的Button 调用Html(Alert)弹框"

android:paddingLeft="10dp"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="以下为本地WebView"

android:layout_marginTop="10dp"

android:paddingLeft="10dp"

/>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Html按钮调用Adnroid(Toast)方法 "

android:paddingLeft="10dp"

/>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:background="#000"

android:padding="10dp"

android:layout_marginTop="10dp"

>

<WebView

android:id="@+id/location_webview"

android:layout_width="fill_parent"

android:layout_height="match_parent"

/>

</LinearLayout>

</LinearLayout>

ActivityWebView

package com.example.androidmenutoabhost;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

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 ActivityWebView extends Activity {

private Button mDojs_click_btn;

private WebView myWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_webview);

initLayout();

}

private void initLayout(){

mDojs_click_btn = (Button)this.findViewById(R.id.dojs_click_btn);

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

// 得到设置属性的对象

WebSettings webSettings = myWebView.getSettings();

// 使能JavaScript

webSettings.setJavaScriptEnabled(true);

// 支持中文,否则页面中中文显示乱码

webSettings.setDefaultTextEncodingName("GBK");

// 限制在WebView中打开网页,而不用默认浏览器

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调用Android函数:

// 先建立桥梁类,将要调用的Android代码写入桥梁类的public函数

// 绑定桥梁类和WebView中运行的JavaScript代码

// 将一个对象起一个别名传入,在JS代码中用这个别名代替这个对象,可以调用这个对象的一些方法

myWebView.addJavascriptInterface(new WebAppInterface(this),

"myInterfaceName");

// 载入页面:本地html资源文件

myWebView.loadUrl("file:///android_asset/simple.html");

// 这里用一个Android按钮按下后调用JS中的代码

mDojs_click_btn.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 用Android代码调用JavaScript函数:

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

}

});

}

/**

* 自定义的Android代码和JavaScript代码之间的桥梁类

*/

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();

}

}

}

另:

网页按钮按下后不出现JS对话框是因为没有设置chrome 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);

}

});

赞助本站

人工智能实验室

相关热词: WebView JavaScript Android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港