文档章节

WebView使用总结(应用函数与JS函数互相调用)

带梦想一7飞
 带梦想一7飞
发布于 2013/01/04 16:38
字数 1599
阅读 575
收藏 3
1.当只用WebView的时候,最先注意的当然是在配置文件中添加访问因特网的权限;

2.如果访问的页面中有Javascript,必须设置支持Javascript:

Java代码
?
代码片段,双击复制
01
webview.getSettings().setJavaScriptEnabled(true);



3.如果希望点击链接由自己处理而不是新开Android的系统browser中响应该链接.给WebView添加一个事件监听对象(WebViewClient)并重写其中的一些方法 shouldOverrideUrlLoading对网页中超链接按钮的响应
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
mWebView.setWebViewClient(newWebViewClient() {
/**
* Show in webview not system webview.
*/
publicbooleanshouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
returnsuper.shouldOverrideUrlLoading(view, url);
}
}


这样就保证了每次打开的页面都是在WebView实例中显示运行的;

4.在显示WebView时,点击手机Back时,会完全退出当前Activity,如果想退到历史浏览页面:重写back监听:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
publicbooleanonKeyDown(intkeyCode, KeyEvent event) {
WebView mWebView = (WebView) findViewById(R.id.browser);
if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
returntrue;
}
returnsuper.onKeyDown(keyCode, event);
}


5.Android SDK提供了一个schema前缀为"file:///android_asset/".WebView遇到这样的schema,就去当前包中的 assets目录中找内容.如:"file:///android_asset/demo.html"
下面一段代码是对网页中JS的类似Alert()类的函数进行相应的重写响应:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
webView.setWebChromeClient(newWebChromeClient() {
publicbooleanonJsAlert(WebView view, String url, String message,
finalJsResult result) {
AlertDialog.Builder b =newAlertDialog.Builder(BrowserJs.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok,
newAlertDialog.OnClickListener() {
publicvoidonClick(DialogInterface dialog,
intwhich) {
result.confirm();
}
});
b.setCancelable(false);
b.create();
b.show();
returntrue;
};
@Override
publicbooleanonJsConfirm(WebView view, String url,
String message,finalJsResult result) {
AlertDialog.Builder b =newAlertDialog.Builder(BrowserJs.this);
b.setTitle("Confirm");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok,
newAlertDialog.OnClickListener() {
publicvoidonClick(DialogInterface dialog,
intwhich) {
result.confirm();
}
});
b.setNegativeButton(android.R.string.cancel,
newDialogInterface.OnClickListener() {
publicvoidonClick(DialogInterface dialog,
intwhich) {
result.cancel();
}
});
b.setCancelable(false);
b.create();
b.show();
returntrue;
};
@Override
publicbooleanonJsPrompt(WebView view, String url, String message,
String defaultValue,finalJsPromptResult result) {
finalLayoutInflater factory = LayoutInflater
.from(BrowserJs.this);
finalView v = factory.inflate(
R.layout.prompt_dialog,null);
((TextView) v.findViewById(R.id.prompt_message_text))
.setText(message);
((EditText) v.findViewById(R.id.prompt_input_field))
.setText(defaultValue);
AlertDialog.Builder b =newAlertDialog.Builder(BrowserJs.this);
b.setTitle("Prompt");
b.setView(v);
b.setPositiveButton(android.R.string.ok,
newAlertDialog.OnClickListener() {
publicvoidonClick(DialogInterface dialog,
intwhich) {
String value = ((EditText) v
.findViewById(R.id.prompt_input_field))
.getText().toString();
result.confirm(value);
}
});
b.setNegativeButton(android.R.string.cancel,
newDialogInterface.OnClickListener() {
publicvoidonClick(DialogInterface dialog,
intwhich) {
result.cancel();
}
});
b.setOnCancelListener(newDialogInterface.OnCancelListener() {
publicvoidonCancel(DialogInterface dialog) {
result.cancel();
}
});
b.show();
returntrue;
};
publicvoidonProgressChanged(WebView view,intnewProgress) {
BrowserJs.this.getWindow().setFeatureInt(
Window.FEATURE_PROGRESS, newProgress *100);
super.onProgressChanged(view, newProgress);
}
publicvoidonReceivedTitle(WebView view, String title) {
BrowserJs.this.setTitle(title);
super.onReceivedTitle(view, title);
}
});
go.setOnClickListener(newOnClickListener() {
publicvoidonClick(View view) {
String url = text.getText().toString();
webView.loadUrl(url);
}
});
webView.loadUrl("file:///android_asset/index.html");


在上述代码中,用到的prompt_dialog.xml:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
<?xml version="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center_horizontal"android:orientation="vertical"
android:layout_width="fill_parent"android:layout_height="wrap_content">
<TextView android:id="@+id/prompt_message_text"
android:layout_width="fill_parent"android:layout_height="wrap_content"/>
<EditText android:id="@+id/prompt_input_field"
android:layout_width="fill_parent"android:layout_height="wrap_content"
android:selectAllOnFocus="true"android:scrollHorizontally="true"
android:minWidth="250dp"/>
</LinearLayout>


还有assets中的Html文件:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<script type="text/javascript">
function onAlert(){
alert("This is a alert sample from html");
}
function onConfirm(){
var b=confirm("are you sure to login?");
alert("your choice is "+b);
}
function onPrompt(){
var b=prompt("please input your password","aaa");
alert("your input is "+b);
}
</script>
<pre>
<input type="button"value="alert"/>
<input type="button"value="confirm"/>
<input type="button"value="prompt"/>
<a href="http://www.google.com"/>Google</a>
</pre>
</html>


接着上篇:
6.通过字符串拼凑的html页面显示:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
publicvoidsimpleJsClick() {
WebView webView = (WebView) findViewById(R.id.webview);
String html ="<html>"
+"<body>"
+"图书封面<br>"
+"<table width='200' border='1' >"
+"<tr>"
+"<td><a onclick='alert(\"Java Web开发速学宝典\")' ><img style='margin:10px' src='http://images.china-pub.com/ebook45001-50000/48015/cover.jpg' width='100'/></a></td>"
+"<td><a onclick='alert(\"大象--Thinking in UML\")' ><img style='margin:10px' src='http://images.china-pub.com/ebook125001-130000/129881/zcover.jpg' width='100'/></td>"
+"</tr>"
+"<tr>"
+"<td><img style='margin:10px' src='http://images.china-pub.com/ebook25001-30000/27518/zcover.jpg' width='100'/></td>"
+"<td><img style='margin:10px' src='http://images.china-pub.com/ebook30001-35000/34838/zcover.jpg' width='100'/></td>"
+"</tr>"+"</table>"+"</body>"+"</html>";
webView.loadDataWithBaseURL(null, html,"text/html","utf-8",null);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(newWebChromeClient());
}


7.在同种分辨率的情况下,屏幕密度不一样的情况下,自动适配页面:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
DisplayMetrics dm = getResources().getDisplayMetrics();
intscale = dm.densityDpi;
if(scale ==240) {//
webView.getSettings().setDefaultZoom(ZoomDensity.FAR);
}elseif(scale ==160) {
webView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
}else{
webView.getSettings().setDefaultZoom(ZoomDensity.CLOSE);
}


8.判断加载的页面URL地址是否正确:
Java代码


?
代码片段,双击复制
01
if(URLUtil.isNetworkUrl(url)==true)


9.设置WebView的一些缩放功能点:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
webView.getSettings().setJavaScriptEnabled(true);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setSupportZoom(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.setInitialScale(70);
webView.setHorizontalScrollbarOverlay(true);


完成java文件:
Java代码


?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
publicclassMethodMutualextendsActivity {
privateWebView mWebView;
privateHandler mHandler =newHandler();
privatestaticfinalString LOG_TAG ="WebViewDemo";
/** Called when the activity is first created. */
@Override
publicvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
loadAssetHtml();
}
publicvoidloadAssetHtml() {
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
mWebView.setWebChromeClient(newMyWebChromeClient());
// 将一个java对象绑定到一个javascript对象中,javascript对象名就是interfaceName,作用域是Global.
mWebView.addJavascriptInterface(newDemoJavaScriptInterface(),"demo");
mWebView.loadUrl("file:///android_asset/demo.html");
// 通过应用中按钮点击触发JS函数响应
Button mCallJS = (Button) findViewById(R.id.mCallJS);
mCallJS.setOnClickListener(newOnClickListener() {
@Override
publicvoidonClick(View v) {
mWebView.loadUrl("javascript:wave()");
}
});
}
privateinti =0;
finalclassDemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
publicvoidcallAndroid() {
mHandler.post(newRunnable() {
publicvoidrun() {
if(i %2==0) {
mWebView.loadUrl("javascript:wave()");
}else{
mWebView.loadUrl("javascript:waveBack()");
}
i++;
}
});
}
}
/**
* Provides a hook for calling "alert" from javascript. Useful for debugging
* your javascript.
*/
finalclassMyWebChromeClientextendsWebChromeClient {
@Override
publicbooleanonJsAlert(WebView view, String url, String message,
JsResult result) {
Log.d(LOG_TAG, message);
result.confirm();
returntrue;
}
}
}


main.xml文件:
Java代码

?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
<?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">
<Button android:layout_width="wrap_content"android:text="CallJs"
android:layout_height="wrap_content"android:id="@+id/mCallJS"/>
<WebView android:id="@+id/webview"android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>


demo.html:
Java代码

?
代码片段,双击复制
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<script language="javascript">
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
/* This function is invoked by the activity */
function waveBack() {
alert("1");
document.getElementById("droid").src="android_normal.png";
alert("2");
}
</script>
<body>
<!-- Calls into the javascriptinterfaceforthe activity -->
<a><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid"src="android_normal.png"/><br>
Click me!
</div></a>
</body>
</html>

本文转载自:http://www.eoeandroid.com/thread-182542-1-1.html

共有 人打赏支持
带梦想一7飞
粉丝 19
博文 190
码字总数 99203
作品 0
朝阳
android h5 js 匿名函数通信

android js 互相调用 支持js匿名函数接收 支持js json对象接收 支持js函数返回值获取 通过注解注入js方法,支持自定义方法名 github https://github.com/lwugang/android-js-bridge Add it i...

liwg
04/25
0
0
WebView与JavaScript交互

在WebView中使用JavaScript   如果你想要载入的页面中用了JavaScript,你必须为你的WebView使能JavaScript。   一旦使能之后,你也可以自己创建接口在你的应用和JavaScript代码间进行交互...

ljrapple
2014/07/29
0
0
JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪
05/29
0
0
在Android上实现Java和Js交互

其实webview加载资源的速度并不慢,但是如果资源多了,当然就很慢。图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ,一般都是 30ms 就 ok 了。不过webview是必须等到全部资源都完...

zhiweiofli
2013/06/20
0
0
WebView深度学习(一)之WebView的基本使用以及Android和js的交互

前言:随着市场需求的不断变化,原生安卓已经无法满足客户的需要了,现在很多app都在使用Android和h5的交互实现某些功能,比如商品详情页,文章详情页面,商品点评页面,还有某些复杂的展示页...

aweiloveandroid
2017/07/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring中static变量不能@value注入的原因

今天本想使用@Value的方式使类中的变量获得yml文件中的配置值,然而一直失败,获得的一直为null。 类似于这样写的。 public class RedisShardedPool { private static ShardedJedisPool pool...

钟然千落
今天
2
0
CentOS7防火墙firewalld操作

firewalld Linux上新用的防火墙软件,跟iptables差不多的工具。 firewall-cmd 是 firewalld 的字符界面管理工具,firewalld是CentOS7的一大特性,最大的好处有两个:支持动态更新,不用重启服...

dingdayu
今天
1
0
关于组件化的最初步

一个工程可能会有多个版本,有国际版、国内版、还有针对各种不同的渠道化的打包版本、这个属于我们日常经常见到的打包差异化版本需求。 而对于工程的开发,比如以前的公司,分成了有三大块业...

DannyCoder
今天
2
0
Spring的Resttemplate发送带header的post请求

private HttpHeaders getJsonHeader() { HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); ......

qiang123
昨天
3
0
Spring Cloud Gateway 之 Only one connection receive subscriber allowed

都说Spring Cloud Gateway好,我也来试试,可是配置了总是报下面这个错误: java.lang.IllegalStateException: Only one connection receive subscriber allowed. 困扰了我几天的问题,原来...

ThinkGem
昨天
38
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部