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. Redis源码分析(adlist)

    源码版本:redis-4.0.1 源码位置: adlist.h : listNode.list数据结构定义. adlist.c:函数功能实现. 一.adlist简介 Redis中的链表叫adlist( ...

  2. Maven 问题 Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:3.0.0-M1 的处理

    一.问题描述 Maven项目报错,该项目是导入的项目,然后再通过开发工具打开项目时,pom.xml文件报错. 并且新建Maven Project 也会报错. 二.报错详细Failure to tran ...

  3. 端口被占用(启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099的解决办法)

    一.问题描述 在IntelliJ IDEA 中启动Tomcat服务器时就出现了如下图所示的错误: 错误: 代理抛出异常错误**: java.rmi.server.ExportException: Po ...

  4. 深入理解Spring IOC容器

    本文将从纯xml模式.xml和注解结合.纯注解的方式讲解Spring IOC容器的配置和相关应用. 纯XML模式 实例化Bean的三种方式: 使用无参构造函数 默认情况下,会使用反射调用无参构造函数来 ...

  5. 大一C语言学习笔记(3)---对于程序员来说,学历和能力,到底哪个重要?

    在高考失利后,我合理地萎靡一段时间,振作起来之后选择了我憧憬了10年的计算机专业---软件工程.但由于分数受限,也是选择了二本普通院校黑科技(我当然爱她,我的母校),而因为学历上的自卑,让我有了想考研 ...

  6. SpringCloud远程服务调用

    笔记 在微服务中,若想要使用远程调用,需要引入spring-cloud-starter-openfeign(在使用注册中心的环境下) <dependency> <groupId> ...

  7. js 开始

    hello world 开始JavaScript 是一种脚本语言,它的解释器被称为 JavaScript 引擎.JavaScript 被发明用于在 HTML 网页上使用,给HTML网页增加动态功能.J ...

  8. 菜鸡的Java笔记 第三十二 - java 静态导入的实现

    静态导入的实现        为了理解静态导入的操作产生的动机,下面通过一个具体的代码来观察        范例:现在有一个 Import 的类,这个类中的方法全部都是 static 方法 packa ...

  9. [bzoj1046]上升序列

    以i为开头的最长上升子序列,那么就是反过来以i为结尾的最长下降子序列,预处理出来后,不断向后找到下一个数即可 1 #include<bits/stdc++.h> 2 using names ...

  10. 9.3 k8s结合ELK实现日志收集

    数据流: logfile -> filebeat > kafka(依赖zookeeper)-> logstash -> elasticsearch -> kibana 1 ...