如何设置WebView支持js的Alert，Confirm，Prompt函数的弹出提示框 javascript 是函数式编程语言吗
\u7528javascript\u7f16\u7a0b\u8bed\u8a00\u7f16\u5199\u4e00\u4e2a\u51fd\u6570\uff0c\u6c42\u4e00\u4e2a\u6570\u7ec4\u4e2d\u7684\u5947\u6570\u548c\uff0c\u5e76\u8fd4\u56devar arr =[123,456,789,147,258,369]var num = 0function add(){for(var i=0;i0 && arr[i]%2 != 0){num += arr[i]console.log(num)}}}add()
\u51fd\u6570\u5f0f\u7f16\u7a0b\u662f\u79cd\u7f16\u7a0b\u8303\u5f0f\uff0c\u5b83\u5c06\u7535\u8111\u8fd0\u7b97\u89c6\u4e3a\u51fd\u6570\u7684\u8ba1\u7b97\u3002\u51fd\u6570\u7f16\u7a0b\u8bed\u8a00\u6700\u91cd\u8981\u7684\u57fa\u7840\u662f \u03bb \u6f14\u7b97\uff08lambda calculus\uff09\u3002\u800c\u4e14\u03bb\u6f14\u7b97\u7684\u51fd\u6570\u53ef\u4ee5\u63a5\u53d7\u51fd\u6570\u5f53\u4f5c\u8f93\u5165\uff08\u53c2\u6570\uff09\u548c\u8f93\u51fa\uff08\u8fd4\u56de\u503c\uff09\u3002\u548c\u6307\u4ee4\u5f0f\u7f16\u7a0b\u76f8\u6bd4\uff0c\u51fd\u6570\u5f0f\u7f16\u7a0b\u5f3a\u8c03\u51fd\u6570\u7684\u8ba1\u7b97\u6bd4\u6307\u4ee4\u7684\u6267\u884c\u91cd\u8981\u3002\u548c\u8fc7\u7a0b\u5316\u7f16\u7a0b\u76f8\u6bd4\uff0c\u51fd\u6570\u5f0f\u7f16\u7a0b\u91cc\uff0c\u51fd\u6570\u7684\u8ba1\u7b97\u53ef\u968f\u65f6\u8c03\u7528\u3002
\u6240\u4ee5\u8bf4JavaScript\u7b97\u662f\u51fd\u6570\u5f0f\u7f16\u7a0b\u8bed\u8a00\u3002
这里主要重写WebChromeClient的3个方法:
onJsAlert :警告框(WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt : 提示框.
onJsConfirm : 确定框.
效果图分别为:
1.Alert
2.Prompt
3.Confirm
先来看看js的页面代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function call(){
var value = document.getElementById("input").value;
alert(value);
}
//警告
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>
</head>
<body>
<input type="text" id="input" value="default"/>
<button onclick=call()>点我弹出Alert</button></br>
<input type="button" value="alert" onclick="onAlert()"/></br>
<input type="button" value="confirm" onclick="onConfirm()"/></br>
<input type="button" value="prompt" onclick="onPrompt()"/></br>
</body>
</html>
Android代码:
package com.example.chenys.webviewdemo;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.TextView;
/**
* Created by mChenys on 2015/11/19.
*/
public class TestAlertActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView webView = new WebView(this);
setContentView(webView);
webView.requestFocus();
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);//启用支持js
//设置响应js 的Alert()函数
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
//设置响应js 的Confirm()函数
@Override
public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
b.setTitle("Confirm");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
b.create().show();
return true;
}
//设置响应js 的Prompt()函数
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
final View v = View.inflate(TestAlertActivity.this, 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 = new AlertDialog.Builder(TestAlertActivity.this);
b.setTitle("Prompt");
b.setView(v);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
String value = ((EditText) v.findViewById(R.id.prompt_input_field)).getText().toString();
result.confirm(value);
}
});
b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
});
b.create().show();
return true;
}
});
webView.loadUrl("file:///android_asset/index3.html");
}
}
有2个需要注意的:
1.重写onJsPrompt 方法,需要我们自定一个提示的布局文件,如下:prompt_dialog.xml
就是一个提示的TextView和输入文本的EditTex而已.
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/prompt_message_text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/prompt_input_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minWidth="250dp"
android:selectAllOnFocus="true"
android:scrollHorizontally="true"/>
</LinearLayout>
2.WebView需要支持js的话,要记得加启用js的支持.
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
绛旓細webview涓js浜や簰鐨勫弬鏁颁竴鑸槸娌℃湁闄愬埗鐨勶紝闅忎究鎬庝箞浼狅紝浣嗘槸鐢变簬瑙勮寖锛岃繕鏄皯浼犵偣鏈濂
绛旓細鎴戜滑鍒涘缓WKWebView鏃跺繀椤诲垱寤篧KWebViewConfiguration绠＄悊鍣 鎴戜滑鍙互閫氳繃浠栨潵杩涜js鏂囦欢鐨勬敞鍏ユ坊鍔狅紝杩欐牱褰揥KWebView鍔犺浇椤甸潰鏃朵笉闇瑕佸啀缃戠粶鍔犺浇锛岀洿鎺ュ彇鏈湴鏂囦欢
绛旓細鎮ㄥソ锛屽緢楂樺叴鑳藉府鍔╂偍锛孉ndroid涓webview鍜宩s涔嬮棿鐨勪氦浜1.android涓埄鐢╳ebview璋冪敤缃戦〉涓婄殑js浠ｇ爜銆侫ndroid 涓彲浠ラ氳繃webview鏉ュ疄鐜板拰js鐨勪氦浜掞紝鍦ㄧ▼搴忎腑璋冪敤js浠ｇ爜锛屽彧闇瑕佸皢webview鎺т欢鐨鏀寔js鐨勫睘鎬璁剧疆涓簍rue锛岋紝鐒跺悗閫氳繃loadUrl灏卞彲浠ョ洿鎺ヨ繘琛岃皟鐢紝濡備笅鎵绀猴細mWebView.getSettings()....
绛旓細4. 鍏煎鎬ч棶棰橈細涓嶅悓娴忚鍣ㄥwebview鐨鏀寔绋嬪害鏈夋墍宸紓锛屽彲浠ヨ冭檻浣跨敤涓浜涘吋瀹规цВ鍐虫柟妗堬紝姣斿浣跨敤polyfill鏉ュ～琛ュ吋瀹规у樊寮傘5. 瀹㈡埛绔檺鍒讹細鏈変簺绉诲姩瀹㈡埛绔彲鑳藉webview鍋氫簡鏌愪簺闄愬埗锛屾瘮濡傜鐢ㄤ簡JavaScript鎴栨煇浜汚PI锛岄渶瑕佹鏌ュ鎴风鐨勭浉鍏抽檺鍒躲傚鏋滀笂杩拌В鍐虫柟娉曢兘涓嶉傜敤锛屽彲浠ュ皾璇曚互涓嬫柟娉曡繘琛屾帓鏌ワ細- ...
绛旓細鍦╳ebView鐨凙ctivity缁撴潫鏃(onDestroy)锛岀鐢╥s鑴氭湰銆傞氬憡鏌ヨCSDN鏄剧ず锛屽綋杩涘叆涓涓獁ebView椤甸潰鍚庯紝灏辩畻璇WebView缁撴潫鍚庡凡灏webView璁剧疆涓簄ul)銆傚啀娆″埌涓婚〉锛屽氨浼氭湁杩炵画鐨勭綉缁滄眰锛屽垵姝ュ垽鏂槸鑴氭湰瀹氭椂鍣ㄧ殑鍘熷洜锛屽湪webView鐨凙ctivity缁撴潫鏃(onDestroy)锛岀鐢╥s鑴氭湰锛屾墍浠webview鑳藉缁存寔涓涓js鑴氭湰涓鐩村湪鍚庡彴...
绛旓細Android涓webview鍜宩s涔嬮棿鐨勪氦浜 1.android涓埄鐢╳ebview璋冪敤缃戦〉涓婄殑js浠ｇ爜銆 Android 涓彲浠ラ氳繃webview鏉ュ疄鐜板拰js鐨勪氦浜掞紝鍦ㄧ▼搴忎腑璋冪敤js浠ｇ爜锛屽彧闇瑕佸皢webview鎺т欢鐨鏀寔js鐨勫睘鎬璁剧疆涓簍rue锛岋紝鐒跺悗閫氳繃loadUrl灏卞彲浠
绛旓細WebSettings甯哥敤灞炴э細WebView甯哥敤API璋冪敤锛歐ebView闇瑕璁剧疆setJavaScriptEnabled(true);浣WebView鏀寔鎵цJavaScript鑴氭湰銆備互涓婁袱绉岮ndroid璋冪敤H5鏂规硶锛屽潎鍦╫nPageFinished()鏂规硶鍥炶皟鍚庢墽琛岋紝鍗抽〉闈㈠姞杞藉畬姣曞悗銆js閫氳繃鑴氭湰鏄犲皠addJavascriptInterface()涓殑Object瀵硅薄锛屽疄鐜癏5璋冪敤Android鏂规硶銆傚墠鎻愰』璁剧疆settings....
绛旓細鐒跺悗鍦╓ebViewClient鐨刼nPageFinished鍒ゆ柇url锛屽姞杞芥垜浠殑js浠ｇ爜銆傜劧鍚庝綘鐨璁剧疆webview鍗冲彲銆侽verride public void onPageFinished(WebView view, String url) { if(url!=null && url.contains("/p/resource/weapon/iProductID/39")){ String fun="javascript:function getClass(parent,sClass) { var aE...
绛旓細涓銆佸鍏ョ浉鍏冲ご鏂囦欢銆璁剧疆鐩稿叧浠ｇ悊鍜屽睘鎬 浜屻乄KWebView鍒濆鍖 娉ㄦ剰:妤间富閬囧埌鐨勭涓涓潙锛氬鏋JS缁橭C浼犲间负绌猴紝蹇呴』鍐欐垚: postMessage(null)锛屽鏋滀粈涔堥兘涓嶅啓锛屾柟娉曟槸璋冧笉閫氱殑銆1銆佸湪viewWillAppear涓閰嶇疆锛 addScriptMessageHandler name: "杩欓噷灏辨槸JS鐨勬柟娉曪紝鏂规硶鍚嶅繀椤荤粺涓"妤间富閬囧埌鐨勭浜屼釜鍧...
绛旓細椤圭洰涓嚭鐜颁竴涓鍏煎鎬ч棶棰橈紝Oppo銆乂ivo鎵嬫満Webview鍔犺浇鏈湴JS銆丆SS涓嶆墽琛 涓銆佸墠鎻 OV鎵嬫満浣庝簬android 7.0鐗堟湰锛屼簩銆乥aseUrl鏄疕ttps鐨 涓夈佷娇鐢細 webView.loadDataWithBaseURL(baseUrl, html, "text/html; charset=UTF-8", "utf-8", null) 鏂规硶鍔犺浇 瑙ｅ喅鍔炴硶 杩樻湁涓绉嶄笉澶ソ鐨勮В鍐冲姙娉曪細 webView...
