CSS+JS更改alert的默认对话框

JavaScript017

CSS+JS更改alert的默认对话框,第1张

百度都是些垃圾回答,我也找了半天,参考这篇文章,亲测可行,简单方便,引入js直接替换页面alert,不需要改原本的代码。

自定义alert样式

alert属于BOM中的window对象的方法,所以我们无法通过改dom文档css来修改样式,但可以直接重写window.alert方法,以此达到目的

$.confirm = function(msg,func1,func2,w,h) { Confirm(msg,func1,func2,w,h)}

function Confirm(msg,func1,func2,w,h){

var opts = {css:{width:w?w:300,height:h?h:120}}

//这里还可以判断msg的长度进行排版,并调整弹出框的大小

install(window.top, opts)

$.DialogData.dialogDiv.find("div[id^='_DialogButtons_']").css('text-align','center')

var win = topWin.$.DialogData.iframeObj.attr('contentWindow')

var doc = win.document

doc.open()

doc.write("<body></body>")

var arr = []

arr.push("<div><table height='100%' border='0' align='center' cellpadding='10' cellspacing='0'>")

arr.push("<tr><td align='center'><img id='Icon' src='../images/icon_query.gif' width='34' height='34' align='absmiddle'></td>")

arr.push("<td align='left' id='Message' style='font-size:9pt'>"+msg+"</td></tr></table></div>")

var div = $(arr.join(''),doc.body)

$(doc.body).append(div)

doc.close()

//设置响应函数

//如果传递响应函数则执行,否则仅关闭窗口

$.DialogData.dialogDiv.find("input[id^='_ButtonOK_']").bind("click", function() {

$.unfunkyUI()

if(func1){

func1()

}

})

$.DialogData.dialogDiv.find("input[id^='_ButtonCancel_']").bind("click", function() {

if(func2){

func2()

}

})

}

})(jQuery)

默认情况下,Android WebView是不支持js的Alert(),Confirm(),Prompt()函数的弹出提示框的.即使设置了setJavaScriptEnabled(true)也是没用的.那么,如何才能让WebView可以支持js的这3个函数呢.可以通过设置WebChromeClient对象来完成.WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等等.

这里主要重写WebChromeClient的3个方法:

onJsAlert :警告框(WebView上alert无效,需要定制WebChromeClient处理弹出)

onJsPrompt : 提示框.

onJsConfirm : 确定框.

效果图分别为:

1.Alert

2.Prompt

3.Confirm

先来看看js的页面代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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)