2008-11-19 9 views
23

Estoy buscando algo como alert(), pero eso no "pausa" el script.¿Hay una alerta de JavaScript que no pausa el script?

Quiero mostrar una alerta y permitir que el siguiente comando, un formulario submit(), continúe. Por lo tanto, la página cambiará después de que se muestre la alerta, pero no esperará hasta que el usuario haya hecho clic en Aceptar.

¿Hay algo como esto o solo es una de esas cosas imposibles?

Respuesta

44

Usted podría hacer la alerta en un setTimeout (que muy poco tiempo de espera) como setTimeout es asíncrona:

setTimeout("alert('hello world');", 1); 

O para hacerlo correctamente que realmente muestran el uso de un método en lugar de una cadena en su setTimeout:

setTimeout(function() { alert('hello world'); }, 1); 

De lo contrario, usted se abre a ataques de inyección de JavaScript. Cuando pasa una cadena, se ejecuta a través de la función JavaScript eval.

+7

No pase una cadena a setTimeout, pase una función. setTimeout (function() {alert ('hello world');}) es mucho más agradable - las funciones son objetos de primer grado en Javascript – Gareth

+0

Sí, sé que debería haberlo hecho como una función en lugar de una cadena para ser evaluado. –

+6

Esta solución no funciona para Chrome, la alerta pausará todas las secuencias de comandos del navegador incluso en setTimeout. – Anas

1

En este caso, sería más apropiado usar DHTML y JavaScript para visualizar dinámicamente un mensaje, ya sea en un elemento HTML simple, o algo que se parezca más a un diálogo (pero no lo es). Eso te daría el control que necesitas. Todos los principales marcos de JavaScript (YUI, Dojo y otros) le daría la capacidad de mostrar un mensaje de forma asincrónica.

1

No fiable. Use un div en la nueva página.

+0

Lo necesita antes de la página para que los usuarios sepan que se están enviando sus datos. –

+0

Entonces, la mejor manera sería enviarlo en segundo plano a un servicio web que devuelve actualizaciones. De esta forma, no necesita cambiar la página hasta que esté completa.setTimeout ("alert()") a menudo está bloqueado: depende de su situación, ya sea que sea un problema. – Mark

2

Puede que no sea lo que está buscando, pero podría ser apropiado usar window.status = 'foo'.

Utilizo esto mucho en una de mis aplicaciones web para una intranet. También el enfoque setTimeout también funciona, pero puede bloquearse si el navegador está ocupado en una tarea intensa. Sin embargo, la actualización de la barra de estado siempre es inmediata.

Esto requiere que sus lectores tengan la configuración de que javascript puede cambiar la barra de estado, siempre el caso si se trata de un sitio de confianza.

+0

Bien idea, pero no muy visible. Intento evitar que el usuario vuelva a hacer clic en el enlace, por lo que no terminan enviando el formulario varias veces (no arruinarán los datos, pero se confundirán con la cabeza del usuario porque no están esperando). el formulario para enviar, pero necesita guardar los datos). –

+0

¿Qué está cambiando 'window.status' se supone que debe hacer? –

3

Si ya está usando JQuery http://docs.jquery.com/UI/Dialog es fácil de usar y tiene estilos muy buenos.

+6

Sí, lo usé antes, pero no quiero agregar todo el código adicional para algo que debería ser simple. –

1

El 98% de las veces hay una forma de mover la secuencia de comandos del mensaje para que llame después de que se ejecute todo lo demás. Para ese otro 2%, me gusta usar divs flotantes que se parecen a esto. A continuación, puede cambiar su CSS para que coincida con el estilo de su aplicación/sitio web o para que se vea más como una ventana emergente estándar.

/*HTML*/ 
<div class="floatingDiv" id="msgBox" style="visibility:hidden"></div> 

/*javaScript*/ 
function openWindow(id){ 
"use strict"; 
document.getElementById(id).style.visibility = 'visible'; 
} 
function closeWindow(id){ 
"use strict"; 
document.getElementById(id).style.visibility = 'hidden'; 
} 
function myMsgBox(TITLE,MESSAGE) { 
"use strict"; 
document.getElementById("msgBox").innerHTML = "<a href=\"javascript:closeWindow('msgBox')\" style=\"float:right\"><img src=\"imgs/close.png\" onmouseover=\"src='imgs/closeOver.png'\" onmouseout=\"src='imgs/close.png'\"/ alt=\"[close]\"></a><h2 style=\"text-align:center; margin-top:0px;\">" + TITLE + "</h2><hr><p align=\"left\">" + MESSAGE + "</p>"; 
openWindow("msgBox"); 
} 

/*CSS*/ 
.floatingDiv { 
position:absolute; 
z-index:10000; 
left:33%; 
top:250px; 
width:33%; 
background-color:#FFF; 
min-width:217px; 
text-align: left; 
border-radius: 10px 10px; 
border:solid; 
border-width:1px; 
border-color:#000; 
vertical-align:top; 
padding:10px; 

background-image: -ms-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%); 
background-image: -moz-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%); 
background-image: -o-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%); 
background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%); 
background-image: linear-gradient(to bottom, #CCCCCC 0%, #FFFFFF 25px, #FFFFFF 100%); 

box-shadow:3px 3px 5px #003; 
filter: progid:DXImageTransform.Microsoft.Shadow(color='#000033', Direction=145, Strength=3); 
} 
Cuestiones relacionadas