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

时间 2019-11-06

标签 webview 使用总结应用函数互相调用栏目 JavaScript 繁體版

原文原文链接

1.当只用WebView的时候,最早注意的固然是在配置文件中添加访问因特网的权限;

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

Java代码

代码片断，双击复制

01	webview.getSettings().setJavaScriptEnabled(true);

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

代码片断，双击复制

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代码

代码片断，双击复制

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代码

代码片断，双击复制

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代码

代码片断，双击复制

<?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代码

代码片断，双击复制

<html>

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>

<a href="http://www.google.com"/>Google</a>

</pre>

</html>

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

代码片断，双击复制

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代码

代码片断，双击复制

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代码

代码片断，双击复制

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代码

代码片断，双击复制

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代码

代码片断，双击复制

<?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代码

代码片断，双击复制

<html>

/* 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>

<a><div style="width:80px;

margin:0px auto;

padding:10px;

text-align:center;

border:2px solid #202020;" >

Click me!

</div></a>

</body>

</html>