Android Internet - WebView 的使用
WebView是Android 提供的操作网页的一个组件。
用于浏览网页及其它Internet资源。
这里总结了一些WebView 的经常使用接口。和2个小演示样例程序用于自己开发时直接使用。就不用再去Baidu了。节省点时间。
使用loadUrl和loadData
WebView.loadUrl：打开URL页面（本地或远端）。
WebView.goForward：实现浏览器的前进功能。
WebView.goBack：实现浏览器的回退功能。
WebView.loadData：载入HTML数据。
演示样例程序 1：使用WebView.loadUrl 浏览网页
Layout file:
<LinearLayout 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"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/etUrl"
android:layout_width="240dip"
android:layout_height="wrap_content"
android:text="www.sina.com.cn" >
</EditText>
<Button
android:id="@+id/btnGo"
android:layout_width="80dip"
android:layout_height="wrap_content"
android:text="Go" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="@+id/btnGoForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward" />
<Button
android:id="@+id/btnGoBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Back" />
</LinearLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>MainActivity.java
package com.example.internet_webview;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity
{
private WebView m_Webview;
private Button m_Go;
private EditText m_Url;
private Button m_GoForward;
private Button m_GoBack;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_Webview = (WebView) findViewById(R.id.webview);
m_Url = (EditText) findViewById(R.id.etUrl);
m_Go = (Button) findViewById(R.id.btnGo);
m_GoForward = (Button) findViewById(R.id.btnGoForward);
m_GoBack = (Button) findViewById(R.id.btnGoBack);
m_Webview.setWebViewClient(new WebViewClient(){});
m_Go.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
m_Webview.loadUrl(m_Url.getText().toString());
}
});
m_GoForward.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (m_Webview.canGoForward())
m_Webview.goForward();
}
});
m_GoBack.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (m_Webview.canGoBack())
m_Webview.goBack();
}
});
}
}
演示样例程序 2：使用WebView.loadData解析HTML
在输入栏中 网址变成了HTML代码，这时使用LoadData能够把HTML代码解析出来
MainActivity.hava
package com.example.internet_webview_loaddata;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
public class MainActivity extends Activity
{
private WebView m_Webview;
private Button m_Go;
private EditText m_Url;
private Button m_GoForward;
private Button m_GoBack;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_Webview = (WebView) findViewById(R.id.webview);
m_Url = (EditText) findViewById(R.id.etUrl);
m_Go = (Button) findViewById(R.id.btnGo);
m_GoForward = (Button) findViewById(R.id.btnGoForward);
m_GoBack = (Button) findViewById(R.id.btnGoBack);
m_Webview.setWebViewClient(new WebViewClient(){});
String customHtml = "<html><body><h1>Hello</h1></body></html>";
m_Url.setText(customHtml);
m_Go.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
m_Webview.loadData(m_Url.getText().toString(), "text/html", "UTF-8");
}
});
m_GoForward.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (m_Webview.canGoForward())
m_Webview.goForward();
}
});
m_GoBack.setOnClickListener(new OnClickListener()
{
@Override
public void onClick(View v)
{
if (m_Webview.canGoBack())
m_Webview.goBack();
}
});
}
}
WebView.loadUrl 与 WebView.loadData 差别
通过两个測试结果能够非常清楚的看到这两个接口使用时的差别，一个是输入的网址。还有一个输入的是网页的代码。
WebView并非一个单纯的能载入URL显示网页的控件。它本身也是一个浏览器的引擎，基于这一点。或许能够加以利用。开发出更有趣的App。
与JavaScript的交互
WebView与JavaScript的交互事实上本质上是WebView中定义的WebClient的浏览器引擎与javascript的交互。浏览器引擎处理javascript的同一时候也提供给Andriod一些接口。使它能够接收到信息而且进行响应。
处理方式：
- Android代码中实现Javascript接口的处理
javascript::alert() === WebChromeClient::onJsAlert()
javascript::confirm() === WebChromeClient::onJsConfirm()
javascript::prompt() === WebChromeClient::onJsPrompt()
当javascript调用它的函数时，也会触发Android调用响应的接口。
Android提供自己定义接口供Javascript使用。
这里用到的主要是WebChromeClient::addJavascriptInterface()接口。当中实现的一些接口函数能够供javascript程序来调用。Android与Javascript通过消息交互。
这里使用的是WebChromeClient::onConsoleMessage()接口。它为Android提供了处理javascript日志消息的一种能力。也能够作为消息传递的一种方式。
layout 定义
activity_main.xml，当中基本的就是WebView.
<LinearLayout 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"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="@+id/etUrl"
android:layout_width="240dip"
android:layout_height="wrap_content"
android:text="www.sina.com.cn" >
</EditText>
<Button
android:id="@+id/btnGo"
android:layout_width="80dip"
android:layout_height="wrap_content"
android:text="Go" />
</LinearLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>js_prompt_layout.xml 弹出对话框时的 layout。
<?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" >
<TextView
android:id="@+id/tvTitle"
android:layout_marginTop="20dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="JS Called prompt Show Android Dialogue" />
<EditText
android:id="@+id/etJSPrompt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
JS页面定义和预览
<html>
<head>
<script type="text/javascript">
function doAlert() {
alert("Alert I am from JS!");
}
function doConfirm() {
confirm("Confirm from JS");
}
function doPrompt()
{
var val = prompt("Prompt from JS, please input");
if (val)
{
document.getElementById('id_name').value = val
}
}
function CustimizeFunc()
{
CustimizeAndroidFunc.popupDialogue();
}
function ShowReturn()
{
var retResult = CustimizeAndroidFunc.showResult();
var dspList = document.getElementById("DispList");
var div = document.createElement("div");
div.innerHTML = retResult;
dspList.appendChild(div);
}
</script>
</head>
<body background="black">
<input type="button" value="Alert Test" onclick="doAlert()"/><br/><br/>
<input type="button" value="Confirm Test" onclick="doConfirm()"/><br/><br/>
<input type="button" value="Prompt Test" onclick="doPrompt()"/><br/>
<input type="text" id="id_name" name="name_a" /><br/><br/>
<input type="button" value="Custimize Function Popup" onclick="CustimizeFunc()"/><br/><br/>
<input type="button" value="Custimize Function ShowList" onclick="ShowReturn()"/><br/><br/>
<div id="DispList"></div>
</body>
</html> 程序执行结果
MainActivity.java
注意： @JavascriptInterface 在Android较新的版本号中为了防止JS能够通过反射取得Java类全部的接口。在定义接口时添加了一个@JavascriptInterface属性，仅仅有带有这个标志函数才干在JS中被訪问。
package com.example.internet_webview_jswork;
import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.EditText;
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
public class MainActivity extends Activity
{
private WebView m_Webview;
private WebChromeClient m_Client;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
m_Webview = (WebView) findViewById(R.id.webview);
m_Webview.getSettings().setJavaScriptEnabled(true);
m_Client = new WebChromeClient()
{
public boolean onJsAlert(WebView view, String url, String message, final JsResult result)
{
new AlertDialog.Builder(MainActivity.this)
.setTitle("JS Call alert and Android show Alert Dialogue")
.setMessage(message)
.setPositiveButton("YES", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
result.confirm();
}
}).create().show();
return true;
}
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result)
{
new AlertDialog.Builder(MainActivity.this)
.setTitle("JS Call confirm and Android show Confirm Dialogue")
.setMessage(message)
.setPositiveButton("YES", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{
result.confirm();
}
})
.setNegativeButton("NO", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{
result.cancel();
}
}).create().show();
return true;
}
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue,
final JsPromptResult result)
{
LayoutInflater inflater = getLayoutInflater();
View prompt = inflater.inflate(R.layout.js_prompt_layout, null);
final EditText etJSPromptValue = (EditText) prompt.findViewById(R.id.etJSPrompt);
new AlertDialog.Builder(MainActivity.this)
.setTitle("JS Call prompt and Android show Prompt Dialogue")
.setView(prompt)
.setPositiveButton("YES", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
// Here will confirm the Android text to JS
result.confirm(etJSPromptValue.getText().toString());
}
})
.setNegativeButton("NO", new DialogInterface.OnClickListener()
{
@Override
public void onClick(DialogInterface dialog, int which)
{
result.cancel();
}
}).create().show();
return true;
}
};
m_Webview.setWebChromeClient(m_Client);
m_Webview.addJavascriptInterface(new Object()
{
@SuppressWarnings("unused")
@JavascriptInterface
public void popupDialogue()
{
new AlertDialog.Builder(MainActivity.this)
.setTitle("JS Call Android popupDialogue")
.setMessage("JS Call Android Custimized function::popupDialogue")
.setPositiveButton("YES", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{}
})
.setNegativeButton("NO", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which)
{}
}).create().show();
}
@SuppressWarnings("unused")
@JavascriptInterface
public String showResult()
{
String strRet = "I am the message from Android";
return strRet;
}
}, "CustimizeAndroidFunc");
m_Webview.loadUrl("file:///android_asset/js_work.html");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
測试GUI.
測试结果
- 点击红色部分的按钮时，输入在Android对话框中的内容会把值显示在HTML的输入框中。
- 点击蓝色部分的按钮时Android函数的返回值会被显示到HTML中。
Android Internet - WebView 的使用的更多相关文章
- Android中webView的基础使用(一)
WebView是View的一个子类,可以让你在activity中显示网页. 可以在布局文件中写入WebView:比如下面这个写了一个填满整个屏幕的WebView: <?xml version=& ...
- Android在WebView上构建Web应用程序
原文链接:http://developer.android.com/guide/webapps/webview.html reference:http://developer.android.com/ ...
- Android之webview详解
文章大纲 一.webview基本介绍1.什么是webview2.为什么要使用webview3.webview基本操作 二.webview高级使用1.WebView状态2.资源加载3.WebView加载 ...
- Android 使用WebView显示网页
构建WebView就可以显示Web信息.因为我觉得这里会讲述很多方式来实现WebView,所以我决定为每一种方式创建一个对应的Activity,MainActivity通过Button可以点击进入对应 ...
- Android之WebView的使用样例——WebSetting、WebViewClient、WebChromeClient
点击查看原文 代码直接下载http://download.csdn.net/detail/metis100/8514837 第一步,xml Manifest中要设置网络权限,否则会出先 webpage ...
- Cocos2d-x3.3RC0载入Android的WebView
代码部分摘自http://www.fusijie.com/blog/2013/12/26/play-cocos2dx-33/ Cocos2d-x3.3RC0通过Jni嵌入Android的WebView ...
- Android使用WebView打包网页成app
原生app的开发成本和网页相比相对较高,所以越来越多的app使用网页来作为界面,甚至完全将一个网站封装成app,可以提高开发速度,还能基本实现跨平台. 下面以Android为例,在ubuntu-14. ...
- Android中webView和网页的交互
Android中webView和网页的交互 Android中webView跟网页的交互式通过JavaScript进行的.具体步骤: 1.创建JavaScript,在点击的时候调用JavaScript ...
- Android 显示 WebView ，加载URL 时，向webview的 header 里面传递参数
1.主要布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...
随机推荐
- B - Chat room
Problem description Vasya has recently learned to type and log on to the Internet. He immediately en ...
- HBase编程 API入门系列之delete（客户端而言）（3）
心得,写在前面的话,也许,中间会要多次执行,连接超时,多试试就好了. 前面的基础,如下 HBase编程 API入门系列之put(客户端而言)(1) HBase编程 API入门系列之get(客户端而言) ...
- bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...
- 前端HTML中float学习笔记
float元素原本的作用是用来使文字包裹图片,现在人们更多的是用来进行布局(ps:有没有点滥用的意思) 也就是说本来你排好的界面设计,但是因为浮动会导致元素脱离文档流,使得其他非浮动的块级元素会无视这 ...
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里 ...
- USB 接口探测分类
USB 接口探测分类 SDP (Standand Downstream Port) 标准下行接口 标准USB都支持的接口 这种端口的D+和D-线上具有15kΩ下拉电阻.限流值如上讨论:挂起时为2.5m ...
- 安卓手机USB无法共享、上网或卡顿的解决方法
安卓手机通过USB为电脑(Windows10)提供网络接入点时,系统程序会异常卡顿. 1)设备管理器2)点击“网络适配器”,在弹出的下拉列表中选择”Remote NDIS based Internet ...
- dubbo之本地存根
本地存根 远程服务后,客户端通常只剩下接口,而实现全在服务器端,但提供方有些时候想在客户端也执行部分逻辑,比如:做 ThreadLocal 缓存,提前验证参数,调用失败后伪造容错数据等等,此时就需要在 ...
- Android开发之拍照功能实现
参考链接:http://www.linuxidc.com/Linux/2013-11/92892p3.htm 原文链接:http://blog.csdn.net/tangcheng_ok/articl ...
- sql 查询替换字符
Select A,B,C from Tb1 –查询所有 Select A,replace(B,’1’,’壹’),C from Tb1 替换查询 Tb1 A B C AA1 1 CC A ...