1. Android提供了WebView控件可访问网页

通过webView.loadUrl加载访问的页面,通过webView.getSettings()获得设置,设置WebView的属性和状态;

WebViewClient处理应用程序中自定义网页浏览程序,辅助webView通知、请求事件的。

2. WebView常用方法:

/*启用Javascript*/
webView.getSettings().setJavaScriptEnabled(true);
/*设置是否支持缩放*/
webView.getSettings().setBuiltInZoomControls(true);
/*设置不显示缩放的图标*/
webView.getSettings().setDisplayZoomControls(false);
/*设置支持聚焦*/
webView.getSettings().setSupportZoom(true);
/* 设置为使用webView推荐的窗口 */
webView.getSettings().setUseWideViewPort(true);
/* 设置网页自适应屏幕大小 */
webView.getSettings().setLoadWithOverviewMode(false);
/* HTML5的地理位置服务,设置为true,启用地理定位 */
webView.getSettings().setGeolocationEnabled(true);
/*不显示水平栏*/
webView.setHorizontalScrollBarEnabled(false);
webView.setHorizontalFadingEdgeEnabled(false);
/*设置允许webView访问文件数据*/
webView.getSettings().setAllowFileAccess(true);
/*是否显示网络图片*/
webView.getSettings().setBlockNetworkImage(true);
/*设置缓冲模式*/
webView.getSettings().setCacheMode();
/*设置默认的字体大小*/
webView.getSettings().setDefaultFontSize();
/*设置在解码时使用的默认编码*/
webView.getSettings().setDefaultTextEncodingName();
/*设置固定使用的字体*/
webView.getSettings().setFixedFontFamily();
/*设置布局方式*/
webView.getSettings().setLayoutAlgorithm();

3.WebViewClient常用方法:

webView.setWebViewClient(new WebViewClient(){
/*控制新的连接在当前WebView中打开*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, request);
}
/*更新历史记录*/
@Override
public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
super.doUpdateVisitedHistory(view, url, isReload);
}
/*应用程序重新请求网页数据*/
@Override
public void onFormResubmission(WebView view, Message dontResend, Message resend) {
super.onFormResubmission(view, dontResend, resend);
}
/*加载指定地址提供的资源*/
@Override
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
}
/*网页加载完毕*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
/*网页开始加载*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
}
/*报告错误信息*/
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
}
/*WebView发生改变*/
@Override
public void onScaleChanged(WebView view, float oldScale, float newScale) {
super.onScaleChanged(view, oldScale, newScale);
}
});
4.WebChromeClient常用方法:
webView.setWebChromeClient(new WebChromeClient(){
/*创建WebView*/
@Override
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
return super.onCreateWindow(view, isDialog, isUserGesture, resultMsg);
}
/*关闭WebView*/
@Override
public void onCloseWindow(WebView window) {
super.onCloseWindow(window);
}
/*处理Javascript中的Alert对话框*/
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
/*处理Javascript中的Confirm对话框*/
@Override
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
return super.onJsConfirm(view, url, message, result);
}
/*处理Javascript中的Prompt对话框*/
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
return super.onJsPrompt(view, url, message, defaultValue, result);
}
/*加载进度条改变*/
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
}
/*网页图标更改*/
@Override
public void onReceivedIcon(WebView view, Bitmap icon) {
super.onReceivedIcon(view, icon);
}
/*网页Title更改*/
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
}
/*WebView显示焦点*/
@Override
public void onRequestFocus(WebView view) {
super.onRequestFocus(view);
}
});

5.实现网页内部逐级返回的方法

@Override
public void onBackPressed() {
if (webView.canGoBack()){
if (webView.getUrl().equals(url)){
super.onBackPressed();
}else{
webView.goBack();
}
}else {
super.onBackPressed();
}
}

6.Android与html5交互

6.1 添加网络权限

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

6.2布局文件

<RelativeLayout 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"
tools:context="com.example.hxl.webview.WebActivity">
<WebView
android:id="@id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>
</RelativeLayout>

6.3设置WebView支持javascript属性

webView.getSettings().setJavaScriptEnabled(true);

6.4加载html

若在assets中,以
private String url = "file:///android_asset/travel_app_h5/travelApp.html";
webView.loadUrl(url);
加载网络,以
private String url = "http://112.12.36.86:8008/travel_app/html/travel_app_h5/travelApp.html";

webView.loadUrl(url);

6.5android与html5交互

webView.addJavascriptInterface(this,"android");
需要在此调用的方法中加@JavascriptInterface增加安全性。

7. 实例 android调用html中的方法实现图片的移动和放大缩小

7.1 html代码:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title> <style type="text/css" rel="stylesheet">
body{
padding: 0;
margin: 0;
}
.app_range{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#scenic_map{
margin-top: 0;
margin-left: 0;
height:100%; }
</style>
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
function scale_map_blowUp() {
var scenic_map_height = $("#scenic_map").height();
var blowUp_height = scenic_map_height*0.05+scenic_map_height;
$("#scenic_map").css("height",blowUp_height+"px");
}
function scale_map_reduce() {
var scenic_map_height = $("#scenic_map").height();
var reduce_height = scenic_map_height-scenic_map_height*0.05;
$("#scenic_map").css("height",reduce_height+"px");
}
function move_top() {
var scenic_map_magin_top = parseInt($("#scenic_map").css("marginTop"));
var move_top_margin = scenic_map_magin_top-10;
$("#scenic_map").css("marginTop",move_top_margin+"px");
}
function move_bottom() {
var scenic_map_magin_top = parseInt($("#scenic_map").css("marginTop"));
var move_top_margin = scenic_map_magin_top+10;
$("#scenic_map").css("marginTop",move_top_margin+"px");
}
function move_left() {
var scenic_map_magin_left = parseInt($("#scenic_map").css("marginLeft"));
var move_left_margin = scenic_map_magin_left-10;
$("#scenic_map").css("marginLeft",move_left_margin+"px");
}
function move_right() {
var scenic_map_magin_left = parseInt($("#scenic_map").css("marginLeft"));
var move_left_margin = scenic_map_magin_left+10;
$("#scenic_map").css("marginLeft",move_left_margin+"px");
}
</script>
</head>
<body>
<div id="app_range" class="app_range">
<img id="scenic_map" src="./images/ljds_map.jpg">
</div>
</body>
</html>

7.2 android代码

public class WebActivity extends AppCompatActivity implements View.OnTouchListener, ScaleGestureDetector.OnScaleGestureListener {
//private String url = "http://112.12.36.86:8008/travel_app/html/travel_app_h5/travelApp.html";
private String url = "file:///android_asset/travel_app_h5/travelApp.html";
private WebView webView;
private float lastX;
private float lastY;
/*是否移动了*/
private boolean isMoved;
/*移动的阈值*/
private static final int TOUCH_SLOP = 50;
private boolean isCanDrag;
private int touchMove ;
private ScaleGestureDetector scaleGestureDetector; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web);
initView();
initData();
setListener();
}
private void setListener() {
webView.setOnTouchListener(this);
}
@JavascriptInterface
private void initData() {
touchMove = ViewConfiguration.get(this).getScaledTouchSlop();
webView.loadUrl(url);
webView.setWebViewClient(new WebViewClient(){
/*控制新的连接在当前WebView中打开*/
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(url);
return super.shouldOverrideUrlLoading(view, request);
}
});
/*启用Javascript*/
webView.getSettings().setJavaScriptEnabled(true);
/*设置支持聚焦*/
webView.getSettings().setSupportZoom(true);
/* 设置为使用webView推荐的窗口 */
webView.getSettings().setUseWideViewPort(true);
/* 设置网页自适应屏幕大小 */
webView.getSettings().setLoadWithOverviewMode(false); webView.addJavascriptInterface(this,"android"); scaleGestureDetector = new ScaleGestureDetector(this,this);
}
private void initView() {
webView = (WebView) findViewById(R.id.webview);
}
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
float x = motionEvent.getX();
float y = motionEvent.getY();
scaleGestureDetector.onTouchEvent(motionEvent);
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN:
isMoved = false;
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_MOVE:
if(isMoved) break;
float dx = x - lastX;
float dy = y - lastY;
if(Math.abs(dx) > TOUCH_SLOP
|| Math.abs(dy) > TOUCH_SLOP) {
//移动超过阈值,则表示移动了
isMoved = true;
}
if (!isCanDrag){
//判断是否移动
isCanDrag = isMove(dx,dy);
}
if (isCanDrag){
if (dy<0 &&Math.abs(dy)>Math.abs(dx)){
webView.loadUrl(String.format("javascript:move_top()"));
}else if (dy>0 &&Math.abs(dy)>Math.abs(dx)){
webView.loadUrl(String.format("javascript:move_bottom()"));
}else if(dx<0 &&Math.abs(dy)<Math.abs(dx)){
webView.loadUrl(String.format("javascript:move_left()"));
}else if (dx>0 &&Math.abs(dy)<Math.abs(dx)){
webView.loadUrl(String.format("javascript:move_right()"));
}
}
lastX = x;
lastY = y;
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
private boolean isMove(float dx, float dy) {
return Math.sqrt((dx*dx + dy*dy))>touchMove;
}
/**
* 返回按钮按下
*/
@Override
public void onBackPressed() {
if (webView.canGoBack()){
if (webView.getUrl().equals(url)){
super.onBackPressed();
}else{
webView.goBack();
}
}else {
super.onBackPressed();
}
}
/**
* 缩放监听事件
*/
@Override
public boolean onScale(ScaleGestureDetector scaleGestureDetector) {
//获得缩放系数值
// getScaleFactor()它的含义是 根据你的手势缩放程度预期得到的图片大小和当前图片大小的一个比值
// 放大时 > 1,缩小时 < 1
float scaleFactor = scaleGestureDetector.getScaleFactor();
if(scaleFactor<1){
webView.loadUrl(String.format("javascript:scale_map_reduce()"));
}else {
webView.loadUrl(String.format("javascript:scale_map_blowUp()"));
}
return true;
}
@Override
public boolean onScaleBegin(ScaleGestureDetector scaleGestureDetector) {
return true;
}
@Override
public void onScaleEnd(ScaleGestureDetector scaleGestureDetector) { }
}

转 【Android】- Android与html5交互操作的更多相关文章

  1. Android WebView与JavaScript交互操作(Demo)

    应用场景: 为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式.相关Hybrid APP(混合型应用)参看:http:// ...

  2. Android Webview与Html5交互

    转:http://fangjie.info/?p=417#more-417   一.WebView.setWebViewClient(new MyWebViewClient()); 1.public ...

  3. Android 内嵌 HTML5 并进行交互

    Android与HTML5的交互主要是两个部分, 与HTML5的交互以及与JavaScript的交互, 与HTML5的交互可以通过注册onclick事件转化为与JavaScript的交互 Androi ...

  4. java攻城狮之路(Android篇)--与服务器交互

    一.图片查看器和网页源码查看器 在输入地址的是不能输入127.0.0.1 或者是 localhost.ScrollView :可以看成一个滚轴 可以去包裹很多的控件在里面 练习1(图片查看器): pa ...

  5. Android - 和其他APP交互 - 获得activity的返回值

    启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...

  6. Android - 和其他APP交互 - 把用户带到其他app

    Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...

  7. 2013 HTML5中国峰会演讲:Android上的HTML5:过去,现在和将来

    转载请注明原文地址:http://blog.csdn.net/milado_nju ## 会议链接(应用和工具专场) http://2013.html5dw.com/main, 2013年8月10日 ...

  8. [Unity][安卓]Unity和Android Studio 3.0 交互通讯(1)Android Studio 3.0 设置

    [安卓]Android Studio 3.0 JDK安卓环境配置(2017.10) http://blog.csdn.net/bulademian/article/details/78387052 [ ...

  9. 客户端相关知识学习(三)之Android原生与H5交互的实现

    Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...

随机推荐

  1. Jetbrains 系 IDE 编辑器的代码提示功能

    著名的 Jetbrains 可谓编程界的一大福音,众多有名代码编辑器比如 ItelliJ IDEA.PHPStorm.WebStorm.PyCharm 等,均出自这家公司麾下. 对于中国的Java开发 ...

  2. QuantumTunnel:Netty实现

    接上一篇文章内网穿透服务设计挖的坑,本篇来聊一下内网穿透的实现. 为了方便理解,我们先统一定义使用到的名词: UserClient:用户客户端,真实的请求发起方: UserServer:内网穿透-用户 ...

  3. Qt 信号与槽的自动关联机制

    前言 对于一些简单的事件判别,如点击按钮.无需写代码关联信号和槽函数. connect(ui->Btnshowhello,SIGNAL(clicked(bool)),this,SLOT(Btns ...

  4. vue监听器watch & 计算属性computed

    侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...

  5. codeql初探

    CodeQL初探 环境搭建 基于Windows 基于Mac 下载codeql https://github.com/github/codeql-cli-binaries/releases/latest ...

  6. hudi clustering 数据聚集(二)

    小文件合并解析 执行代码: import org.apache.hudi.QuickstartUtils._ import scala.collection.JavaConversions._ imp ...

  7. php 图像和水印

    生成图像 $img = imagecreate(400,400); imagecolorallocate($img,255,255,255); imageellipse($img,200,200,50 ...

  8. (数据科学学习手札131)pandas中的常用字符串处理方法总结

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在日常开展数据分析的过程中,我们经常需要对 ...

  9. [atAGC045E]Fragile Balls

    构造一张有向图$G=([1,n],\{(a_{i},b_{i})\})$(可以有重边和自环),定义其连通块为将其看作无向图(即边无向)后分为若干个连通块 记$in_{i}$为$i$的入度(即最终盒子中 ...

  10. [bzoj4003]城市攻占

    倍增,对于每一个点计算他走到$2^i$次祖先所需要的攻击力以及最终会变成什么(一个一次函数),简单处理即可(然而这样是错的,因为他只保证了骑士的攻击力可以存,并没有保证这个一次函数的系数可以存)(其实 ...