文档章节

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

带梦想一7飞
 带梦想一7飞
发布于 2013/01/04 16:38
字数 1599
阅读 577
收藏 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

共有 人打赏支持
上一篇: 深入浅出UML类图
下一篇: 学习网址
带梦想一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
iOS开发之Objective-C与JavaScript的交互

UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。 stringByEv...

鉴客
2011/12/06
1K
0
Objective-C与JavaScript的交互

UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将 javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。 UIWebView是...

长平狐
2013/03/19
97
0

没有更多内容

加载失败,请刷新页面

加载更多

mybatis学习(1)

JDBC连接方式: 1.底层没有使用连接池,操作数据库需要频繁的创建和关闭连接,消耗资源。 2.写原生的JDBC代码在JAVA中,一旦需要修改SQL的话(比如表增加字段),JAVA需要整体重新编译,不利...

杨健-YJ
16分钟前
0
0
怎么组织文档

可以从以下几个方面考虑组织文档: ☐ 各种分支的界面截图和对应的类及文件 ☐ 框架或类图 ☐ 流程图 ☐ 时序图 ☐ 注意事项

-___-
28分钟前
1
0
分布式之数据库和缓存双写一致性方案解析

引言 为什么写这篇文章? 首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用。在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作。 但是在更新缓存方面,对于更...

别打我会飞
30分钟前
5
0
我的oracle11G,12c OCM之路

ocm认证感悟 ---------------------- 距离拿到ocm证书已经过了1年的时间,当初拿到证书的心情到现在还记得。其实在每个DBA心里都有一个成为强者的梦想,需要被认可,我也一样。我干过开发,做...

hnairdb
31分钟前
1
1
手动部署kubernetes集群(1.13.1最新版)

一、机器规划 使用五台机子部署k8s集群,规划如下: master节点3台(同时也是etcd节点) node节点2台 ip分配如下: ip:192.168.10.101,主机名:k8s-etcd01 ip:192.168.10.102,主机名:k8s...

人在艹木中
36分钟前
28
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部