您的位置：首页 > Web前端 > JavaScript

html和js交互

2016-07-11 19:43 218 查看

package com.bawei.webviewdemo;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

/**
* webview使用
* 1.布局文件中声明一个<WebView />
* 2.在清单列表中加Internet
* 代码：
* WebSettings ws = webview.getSettings();
* a.支持JavaScript脚本
* b.编码格式
* c.缓存使用机制
* d.支持缩放
*
* webview渲染html页面的一些效果处理
* webview.setWebViewClient();
* webview和js相关的处理
* webview.setWebChromeClient();
*
* webview、js交互
* 1.js调用Android方法
* 	 a.封装Android方法时，修饰符public，并且加上注解@javascriptInterface(android 4.0上)
*   b.webview.addJavascriptInterface(方法所属对象，js中别名);
*   js调用时:别名.方法名();
* 2.Android调用js函数
* 	webview.loadUrl("javascript:方法名()");
*
* @author lina
*
*/
public class MainActivity extends Activity {

private WebView view;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

view = (WebView)findViewById(R.id.wv);

WebSettings setting = view.getSettings();

//设置webview支持JavaScript脚本
setting.setJavaScriptEnabled(true);
//设置编码格式
setting.setDefaultTextEncodingName("utf-8");
//支持缩放
setting.setSupportZoom(true);

//设置缓存是否可用
//		setting.setAppCacheEnabled(false);

//js调用Android方法，参数1.调用方法的所属对象     参数2.别名（js中要用的对象名）
view.addJavascriptInterface(this, "LoginActivity");

view.loadUrl("file:///android_asset/index.html");

//覆写webview默认使用第三方或默认浏览器打开网页的行为,关于渲染html页面的一些效果处理
view.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);
return true;
}

});

//处理js一些操作
view.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(final WebView view, final String url, String message,
final JsResult result) {

//使用Android的对话框来替代网页中的
new AlertDialog.Builder(MainActivity.this).setMessage(message).setTitle("提示框")
.setPositiveButton("确定", new DialogInterface.OnClickListener() {

@Override
public void onClick(DialogInterface dialog, int which) {

//Android调用js函数
view.loadUrl("javascript:hint('test...')");

//点击确定按钮后，把操作权还给html页面
result.confirm();

}
}).show();

return true;
}

@Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {

return true;
}

});

}

//js要调用的方法：a.必须是public，b.Android4.0以上都要在方法名上面加上注解@JavascriptInterface
@JavascriptInterface
public boolean check(String user,String pwd){
boolean b = false;

//去取值 验证传来的用户名、密码是否正确
if(user.equals("地主")){
b = true;
}

return b;
}

public void zoomOut(View v){
view.zoomOut();
}

public void zoomIn(View v){
view.zoomIn();
}

}

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello world</title>
<script type="text/javascript">
function login(){
var uname = document.getElementById("uname").value;
var pwd = document.getElementById("pwd").value;

if(uname == "" && pwd ==""){
alert("用户名或密码不能为空!");
document.getElementById("uname").focus();
}else{
//我希望调用Android中check方法
var flag = LoginActivity.check(uname,pwd);
alert(flag);
}
}

</script>
</head>
<body>
<input type="text" name="uname" id="uname" value="" />
<input type="text" name="pwd" id="pwd" value="" />
<input type="button" id="login" value="login" onclick="login()"/>   
<a href="register.html">注册</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航