`

Android学习13-----网络通信(4) WebView组件

Android网络通信WebView 
阅读更多

 

WebView 是一个开发的浏览器组件，是基于 WebKit 内核开发出来的，如 Safari 、 Google Chrome 浏览器都是通过 WebView 实现的，而在 Android 系统中，默认提供了 WebView 组件的支持。除了支持各个浏览器的“前进”、“后退”等功能之外，最为强大的是在 WebView 组件之中也支持 JavaScript 的操作。

一、加载网页

要想使用 WebView 加载网页，最简单的方法就是使用 loadUrl() 方法，此方法只需要输入网页的 URL 地址即可。下面涉及网络访问的需要加载网络访问权限，这里不一一说了。

main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:orientation="horizontal" 
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<Button
			android:id="@+id/open"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content" 
			android:text="打开" />
		<EditText
			android:id="@+id/inputurl"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content" 
			android:text="http://www.baidu.com" />
	</LinearLayout>
	<WebView
		android:id="@+id/webview"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"  />
</LinearLayout>

WebView01_Activity.java

package com.iflytek.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class WebView01_Activity extends Activity {
	private Button openBtn = null;
	private EditText inputurl = null;
	private WebView webview = null;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.openBtn = (Button) super.findViewById(R.id.open);
		this.inputurl = (EditText) super.findViewById(R.id.inputurl);
		this.webview = (WebView) super.findViewById(R.id.webview);
		this.openBtn.setOnClickListener(new OpenOnClickListenerImpl());
	}

	private class OpenOnClickListenerImpl implements OnClickListener {

		@Override
		public void onClick(View v) {
			String url = WebView01_Activity.this.inputurl.getText().toString();
			WebView01_Activity.this.webview.loadUrl(url);// 加载页面
		}

	}
}

上面也可以将字符串中定义的HTML标记变为网页，在WebView中显示。
Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<WebView
		android:id="@+id/webview"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"  /> 
</LinearLayout>

WebView02_Activity.java

package com.iflytek.demo;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebView02_Activity extends Activity {

	private WebView webview = null;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.webview = (WebView) super.findViewById(R.id.webview);
		String data = "<h1>this.is baidu.</h1>"
				+ "<h2><a href=\"http://www.baidu.com\">BAIDU</a><h2>";
		this.webview.loadData(data, "text/html", "UTF-8");
	}
}

 

二、控制 WebView ，实现属于自己的浏览器

Main.xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/open"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="打开" />

        <Button
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="后退" />

        <Button
            android:id="@+id/forward"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="前进" />

        <Button
            android:id="@+id/zoomout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="缩小" />

        <Button
            android:id="@+id/zoomin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="放大" />

        <Button
            android:id="@+id/clear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="清空" />
    </LinearLayout>

    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

WebView02_Activity.java

package com.iflytek.demo;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

public class WebView02_Activity extends Activity {
	private Button openBtn = null;
	private Button backBtn = null;
	private Button forwardBtn = null;
	private Button zoominBtn = null;
	private Button zoomoutBtn = null;
	private Button clearBtn = null;
	private WebView webview = null;
	private String urlData[] = new String[] { "http://www.baidu.com",
			"http://www.iteye.com", "http://www.eoeandroid.com/",
			"http://blog.jobbole.com/", "http://www.cnblogs.com/" };

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.webview = (WebView) super.findViewById(R.id.webview);
		this.openBtn = (Button) super.findViewById(R.id.open);
		this.backBtn = (Button) super.findViewById(R.id.back);
		this.forwardBtn = (Button) super.findViewById(R.id.forward);
		this.zoominBtn = (Button) super.findViewById(R.id.zoomin);
		this.zoomoutBtn = (Button) super.findViewById(R.id.zoomout);
		this.clearBtn = (Button) super.findViewById(R.id.clear);

		this.openBtn.setOnClickListener(new OpenOnClickListenerImpl());
		this.backBtn.setOnClickListener(new BackOnClickListenerImpl());
		this.forwardBtn.setOnClickListener(new ForwardOnClickListenerImpl());
		this.zoominBtn.setOnClickListener(new ZoomInOnClickListenerImpl());
		this.zoomoutBtn.setOnClickListener(new ZoomOutClickListenerImpl());
		this.clearBtn.setOnClickListener(new ClearOnClickListenerImpl());
	}

	private class OpenOnClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			WebView02_Activity.this.showUrlDialog();
		}
	}

	private class BackOnClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			if (WebView02_Activity.this.webview.canGoBack()) {
				WebView02_Activity.this.webview.goBack();
			}
		}
	}

	private class ForwardOnClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			if (WebView02_Activity.this.webview.canGoForward()) {
				WebView02_Activity.this.webview.goForward();
			}
		}
	}

	private class ZoomInOnClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			WebView02_Activity.this.webview.zoomIn();
		}
	}

	private class ZoomOutClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			WebView02_Activity.this.webview.zoomOut();
		}
	}

	private class ClearOnClickListenerImpl implements OnClickListener {
		@Override
		public void onClick(View v) {
			WebView02_Activity.this.webview.clearHistory();
		}
	}

	private void showUrlDialog() {
		Dialog dialog = new AlertDialog.Builder(this).setIcon(R.drawable.ic_launcher)
				.setTitle("请选择要浏览的网站")
				.setNegativeButton("取消", new DialogInterface.OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog, int which) {

					}
				})
				.setItems(this.urlData, new DialogInterface.OnClickListener() {
					@Override
					public void onClick(DialogInterface dialog, int which) {
						webview.loadUrl(urlData[which]);
					}
				}).create();
		dialog.show();
	}
}

 

 

三、通过 HTML 定义显示界面

在前面我们使用 WebView 组件浏览的是 Web 站点，而实际上，也可以通过 WebView 组件加载项目中的 HTML 页面，以达到界面显示的操作，但是在进行这些操作之前，首先必须了解 android.webkit.WebSettings 类，此类的主要功能是进行 WebView 的操作设置，用户可以通过 WebView 类中的 getSettings() 方法取得 WebSettings 类的对象，该对象常用方法如下：

No.

方法

描述

1

Public void setBuitInZoomControls(Boolean enabled)

设置是否可以进行缩放控制

2

Public synchronized void setJavaScriptEnabled(Boolean falg)

设置是否启动 JavaScript 支持

3

Public void setSaveFormData(Boolean save)

设置是否保存表单数据

4

Public void setSavePassword(Boolean save)

设置是否保存密码

5

Public synchronized void setGeolocationEnabled(Boolean flag)

设置是否可以获取地理位置

要通过 HTML 设置显示界面，则还涉及 HTML 文件的保存问题，此时用户可以将文件保存在 Android 项目的 assets 文件夹下的 html 文件夹。

下面定义包含 JS 的 HTML 文件 assests/html/show_htmlinjs.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
	function openurl(url) {
		window.location = url;
	}
</script>
</head>
<body>
	<center>
		<img src="../images/java.jpg" width="150" height="220">
		<h3>请选择您要浏览的网站：</h3>
		<select name="url" onchange="openurl(this.value)">
			<option value="http://www.baidu.com">BaiDu</option>
			<option value="http://www.iteye.com">Iteye</option>
			<option value="http://www.google.com">Googlg</option>
		</select>
	</center>
</body>
</html>

WebView03_Activity.java

package com.iflytek.demo;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebView03_Activity extends Activity {
	private WebView webview = null;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    	this.webview = (WebView) super.findViewById(R.id.webview);
		this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
		this.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放
		this.webview.loadUrl("file:/android_asset/html/show_htmlinjs.html");
    }
}

 

四、本地程序与 JavaScript 互操作

使用 WebView 还可以专门处理 JavaScript 返回的警告框、确认框等互操作，此时就需要使用 android.webkit.WebChromeClient 客户端处理的操作类完成。其常用方法：

No.

方法

描述

1

Public void onCloseWindow(WebView window)

窗口关闭操作

2

Public Boolean onCreateWindow(WebView view,Boolean dialog,Boolean userGesture,Message resultMsg)

创建新的 WebView

3

Public Boolean onJsAlert(WebView view String url,String message,JsResult result)

弹出警告框互操作

4

Public Boolean onJsBeforeUnload(WebView view,String url,String message,JsResult result)

页面关闭互操作

5

Public Boolean onJsConfirm(WebView view,String url,String message,JsResult result)

弹出确认框互操作

6

Public Boolean onJsPrompt(WebView view,String url,String message,String defaultValue,JsPromptResult result)

弹出提示框互操作

7

Public Boolean onJsTimeout()

计时器已到互操作

8

Public void onProgressChanged(WebView view,int newProgress)

进度改变互操作

9

Public void onReceivedTitle(WebView view,String title)

接收页面标题互操作

定义 HTML 界面 show_js.html 

<head>
	<title>Iteye：www.iteye.com</title>
	<meta http-equiv="Content-Type" content="text/html;charset=GBK">
	<script language="javascript">
		function openAlert(){
			window.alert("Iteye：\nwww.iteye.com") ;
		}
		function openConfirm(){
			if (window.confirm("是否删除此信息？")) {
				window.location = "delete_js.html" ;
			}
		}
	</script>
</head>
<input type="button" value="弹出警告框" onclick="openAlert()">
<input type="button" value="弹出确认框" onclick="openConfirm()">

delete_js.html

<head>
	<title>Iteye：www.iteye.com</title>
	<meta http-equiv="Content-Type" content="text/html;charset=GBK">
</head>
<h1>信息已删除！</h1>

WebView04_Activity.java

package com.iflytek.demo;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Toast;

public class WebView04_Activity extends Activity {
	private WebView webview = null;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.webview = (WebView) super.findViewById(R.id.webview);
		this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
		this.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放
		this.webview.setWebChromeClient(new WebChromeClientImpl());//接受客户端操作
		this.webview.loadUrl("file:/android_asset/html/show_js.html");//读取网页
	}

	private class WebChromeClientImpl extends WebChromeClient {

		@Override
		public boolean onJsAlert(WebView view, String url, String message,
				final JsResult result) {
			Dialog dialog = new AlertDialog.Builder(WebView04_Activity.this)
					.setIcon(R.drawable.ic_launcher)
					.setTitle("Xdwang警告")
					.setMessage(message)
					.setPositiveButton(android.R.string.ok,
							new DialogInterface.OnClickListener() {

								@Override
								public void onClick(DialogInterface dialog,
										int which) {
									Toast.makeText(WebView04_Activity.this,
											"关闭警告框", Toast.LENGTH_SHORT).show();
									result.cancel();
								}
							}).create();
			dialog.show();
			return true;
		}

		@Override
		public boolean onJsConfirm(WebView view, String url, String message,
				final JsResult result) {
			Dialog dialog = new AlertDialog.Builder(WebView04_Activity.this)
					.setIcon(R.drawable.ic_launcher)
					.setTitle("确定删除？")
					.setMessage(message)
					.setPositiveButton("删除",
							new DialogInterface.OnClickListener() {

								@Override
								public void onClick(DialogInterface dialog,
										int which) {
									Toast.makeText(WebView04_Activity.this,
											"确定删除", Toast.LENGTH_SHORT).show();
									result.confirm();
								}
							})
					.setNegativeButton("取消",
							new DialogInterface.OnClickListener() {
								@Override
								public void onClick(DialogInterface dialog,
										int which) {
									Toast.makeText(WebView04_Activity.this,
											"取消删除", Toast.LENGTH_SHORT).show();
									result.cancel();
								}
							}).create();
			dialog.show();
			return true;
		}

		@Override
		public void onReceivedTitle(WebView view, String title) {
			WebView04_Activity.this.setTitle(title);
			super.onReceivedTitle(view, title);
		}

	}
}

 

五、使用 JavaScript 调用 Android

前面我们说了如何通过 Android 调用 JavaScript 的操作，反过来， JavaScript 程序也可以调用 Android 成词，此时就必须依靠 WebView 中的 addJavaScriptInterface() 方法完成，定义如下：

Public void addJavaScriptInterface(Object 操作对象 ,String 标记名称 )

在此方法中，用户需要一个标记的名称，而该标记名称的主要功能就是绑定 HTML 与 android 间的联络标记

WebView05_Activity.java 

package com.iflytek.demo;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class WebView05_Activity extends Activity {
	private WebView webview = null;

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		this.webview = (WebView) super.findViewById(R.id.webview);
		this.webview.getSettings().setJavaScriptEnabled(true); // 启用JavaScript
		this.webview.getSettings().setBuiltInZoomControls(true); // 控制页面缩放
		this.webview.addJavascriptInterface(this, "xdwangandroid");
		this.webview.loadUrl("file:/android_asset/html/show_js.html");
	}

	public String getContent() {
		return "ITEYE:www.iteye.com";
	}
}

show_js.html

<head>
<title>Iteye：www.iteye.com</title>
<meta http-equiv="Content-Type" content="text/html ; charset=GBK">
</head>
<h1>
	<span id="msg">等待接收信息...</span>
</h1>
<script language="javascript">
	document.getElementById("msg").innerHTML = window.xdwangandroid.getContent();
</script>

 

 

 

分享到：
| Android学习13-----网络通信(3) 与Web Se ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    unity-webview-integration-master.zip

    这个项目的核心是将一个Android原生的WebView组件与Unity的游戏逻辑相结合，使得用户可以在Unity应用中浏览网页、执行JavaScript代码甚至与Unity场景进行交互。 Unity-webview-integration的核心组件主要包括两个...

    react-native-webview.zip

    WebView组件是React Native的一个重要组成部分，它是Android和iOS系统内置的浏览器引擎，用于显示网页内容。React Native WebView库就是对这个原生组件的封装，提供了更方便的API和生命周期管理，使开发者可以在...

    php-android-webview

    而WebView则是Android系统中的一个组件，它允许开发者在应用程序中嵌入网页内容，实现类似浏览器的功能。 **PHP** 是“超文本预处理器”的缩写，是一种解释型的、面向对象的、通用的脚本语言。在Web开发中，PHP常...

    Android-android端通用WebView

    这个“Android-android端通用WebView”项目可能是为了提供一个可复用的、功能丰富的WebView组件，方便开发者快速集成到自己的应用中。下面我们将详细探讨WebView的相关知识点。 1. **WebView的基本使用**： - `...

    Unity-Webview-master

    4. **平台兼容性**：Unity-Webview需要处理不同操作系统（如Android、iOS）的原生WebView组件，因此项目可能包含针对不同平台的特定实现和适配代码。 5. **资源加载**：在Unity中，开发者需要考虑如何加载和显示...

    unity-webview是Unity 5的一个插件，用于覆盖WebView组件在Unity视图上

    Unity-webview 是一款专为 Unity 5 设计的插件，其主要功能是将 WebView 组件集成到 Unity 游戏或应用的视图之中。这个插件允许开发者在 Unity 创建的环境中展示网页内容，比如 HTML、CSS 和 JavaScript，极大地拓展...

    Android通过WEBVIEW调用HTTPS

    本文将深入探讨如何在Android应用中通过WebView组件加载并正确处理HTTPS请求。 首先，了解WebView的基本使用。在AndroidManifest.xml文件中，你需要为应用添加INTERNET权限，这是访问网络的基础： ```xml &lt;uses-...

    android的webView的登录实例

    在项目的`activity_main.xml`布局文件中，添加一个WebView组件。使用以下XML代码： ```xml &lt;WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" ...

    Android高级应用源码-webview重载使用.zip

    在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容，实现与网页的交互。这个“Android高级应用源码-webview重载使用”项目可能包含了一系列关于如何优化和自定义WebView使用的示例...

    android webview demo

    在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序内部加载和显示网页内容。`android webview demo` 是一个示例项目，旨在帮助开发者理解如何有效地使用WebView进行网页交互。下面将详细介绍...

    android webview开发应用

    4. **JavaScript交互**：通过启用JavaScript并使用`addJavascriptInterface()`方法，可以创建一个Java对象供JavaScript调用，实现Android与JavaScript的双向通信。 5. **WebSettings**：`WebSettings`类用于配置...

    Android 通过 WebView 与js 简单交互实现图文混排与查看大图功能

    在Android开发中，WebView是一个非常重要的组件，它允许我们在应用中加载和显示网页内容。本文将深入探讨如何利用WebView和JavaScript进行简单交互，以实现图文混排和查看大图的功能。 1. **WebView基本使用** - ...

    Android webview QQ一键登录并向后台返回参数

    在Android开发中，WebviewQQ登录是一种常见的社交登录方式，它允许用户通过内置的WebView组件直接使用QQ账号进行登录，并将登录后的参数回传给应用的后台系统。这种方式简化了用户的登录流程，提高了用户体验，同时...

    webkit-webview代码

    学习和理解`webkit-webview`的相关知识，对于开发混合型移动应用或优化原生应用中的网页展示是非常关键的。通过熟练运用`webkit-webview`，开发者能够构建出更强大、更安全、更符合用户需求的应用。

    Android高级应用源码-Android webView和js交互的Demo.zip

    这个Demo项目是学习和实践Android WebView与JavaScript交互的一个好资源，可以帮助开发者掌握如何在Android应用中嵌入网页并实现双向通信，提升用户体验。通过分析和运行此源码，开发者可以深入理解Android WebView...

    鸿蒙javaUI-webview-demo.rar

    在鸿蒙操作系统中，开发者可以利用Java UI与WebView组件来构建混合式应用，实现网页内容与本地应用的深度融合。"鸿蒙javaUI-webview-demo.rar"这个压缩包就是一个关于如何在鸿蒙平台上使用WebView进行远程连接并实现...

    Android之WebView使用Demo

    在Android开发中，`WebView`是一个非常重要的组件，它允许我们在应用程序内部加载和显示网页内容，极大地扩展了Android应用的功能。本教程将详细讲解如何在Android应用中使用`WebView`，并结合提供的博客链接，帮助...

    Android-AndroidChromium谷歌浏览器安卓版源码项目

    4. **网络通信**：Android Chromium使用HTTP/HTTPS协议与服务器交互，源码中包含了网络请求的实现，包括异步加载、重定向处理、缓存策略等。 5. **多线程模型**：为了保证性能和用户体验，Chromium在Android上采用...

    Android WebViewJS应用源码.zip

    这个项目旨在帮助开发者了解如何通过Android的WebView组件与网页中的JavaScript进行通信，以便实现更丰富的移动应用功能。 **一、Android WebView组件** WebView是Android SDK中的一个视图类，它允许在Android应用...

    android的webview代码

    在Android开发中，WebView是一个非常重要的组件，它允许我们在应用程序中内嵌网页内容，实现与网页的交互。WebView是Android SDK中的一个类，它继承自View，并且通过加载URL，可以展示网页，甚至支持JavaScript执行...

Magicbox
Global site tag (gtag.js) - Google Analytics