javascript - permitir - ventana emergente whatsapp
Detectar ventanas emergentes bloqueadas en Chrome (15)
Aquí hay una versión que actualmente está funcionando en Chrome. Solo una pequeña alteración de la solución de Rich, aunque agregué una envoltura que maneja el tiempo también.
function checkPopupBlocked(poppedWindow) {
setTimeout(function(){doCheckPopupBlocked(poppedWindow);}, 5000);
}
function doCheckPopupBlocked(poppedWindow) {
var result = false;
try {
if (typeof poppedWindow == ''undefined'') {
// Safari with popup blocker... leaves the popup window handle undefined
result = true;
}
else if (poppedWindow && poppedWindow.closed) {
// This happens if the user opens and closes the client window...
// Confusing because the handle is still available, but it''s in a "closed" state.
// We''re not saying that the window is not being blocked, we''re just saying
// that the window has been closed before the test could be run.
result = false;
}
else if (poppedWindow && poppedWindow.outerWidth == 0) {
// This is usually Chrome''s doing. The outerWidth (and most other size/location info)
// will be left at 0, EVEN THOUGH the contents of the popup will exist (including the
// test function we check for next). The outerWidth starts as 0, so a sufficient delay
// after attempting to pop is needed.
result = true;
}
else if (poppedWindow && poppedWindow.test) {
// This is the actual test. The client window should be fine.
result = false;
}
else {
// Else we''ll assume the window is not OK
result = true;
}
} catch (err) {
//if (console) {
// console.warn("Could not access popup window", err);
//}
}
if(result)
alert("The popup was blocked. You must allow popups to use this site.");
}
Para usarlo solo haz esto:
var popup=window.open(''location'',etc...);
checkPopupBlocked(popup);
Si el mensaje emergente get está bloqueado, el mensaje de alerta aparecerá después del período de gracia de 5 segundos (puede ajustar eso, pero 5 segundos deberían ser bastante seguros).
Conozco las técnicas de JavaScript para detectar si una ventana emergente está bloqueada en otros navegadores (como se describe en la respuesta a esta pregunta ). Aquí está la prueba básica:
var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed==''undefined'')
{
//POPUP BLOCKED
}
Pero esto no funciona en Chrome. La sección "POPUP BLOCKED" nunca se alcanza cuando la ventana emergente está bloqueada.
Por supuesto, la prueba está funcionando hasta cierto punto, ya que Chrome no bloquea realmente la ventana emergente, sino que la abre en una pequeña ventana minimizada en la esquina inferior derecha que enumera las ventanas emergentes "bloqueadas".
Lo que me gustaría hacer es poder decir si la ventana emergente fue bloqueada por el bloqueador de ventanas emergentes de Chrome. Intento evitar el rastreo de navegador a favor de la detección de características. ¿Hay alguna manera de hacerlo sin tener que olfatear el navegador?
Editar : Ahora he intentado hacer uso de newWin.outerHeight , newWin.left y otras propiedades similares para lograr esto. Google Chrome devuelve todos los valores de posición y altura como 0 cuando la ventana emergente está bloqueada.
Desafortunadamente, también devuelve los mismos valores incluso si la ventana emergente se abre realmente durante un período de tiempo desconocido. Después de un período mágico (un par de segundos en mi prueba), la información de ubicación y tamaño se devuelve como los valores correctos. En otras palabras, todavía no estoy más cerca de resolver esto. Cualquier ayuda sería apreciada.
Bueno, el "momento mágico" del que hablas es probablemente cuando se ha cargado el DOM de la ventana emergente. O bien podría ser cuando todo (imágenes, CSS fuera de borda, etc.) se haya cargado. Puede probar esto fácilmente agregando un gráfico muy grande a la ventana emergente (¡borre primero su caché!). Si estaba usando un Framework de Javascript como jQuery (o algo similar), podría usar el evento ready () (o algo similar) para esperar a que DOM se cargue antes de verificar el desplazamiento de la ventana. El peligro en esto es que la detección de Safari funciona de manera conflictiva: el DOM de la ventana emergente nunca estará listo () en Safari porque le dará un identificador válido para la ventana que está intentando abrir, ya sea que se abra o no. no. (De hecho, creo que su código de prueba emergente no funcionará para safari).
Creo que lo mejor que puede hacer es ajustar su prueba en un setTimeout () y darle al emergente 3-5 segundos para completar la carga antes de ejecutar la prueba. No es perfecto, pero debería funcionar al menos el 95% del tiempo.
Aquí está el código que uso para la detección entre navegadores, sin la parte de Chrome.
function _hasPopupBlocker(poppedWindow) {
var result = false;
try {
if (typeof poppedWindow == ''undefined'') {
// Safari with popup blocker... leaves the popup window handle undefined
result = true;
}
else if (poppedWindow && poppedWindow.closed) {
// This happens if the user opens and closes the client window...
// Confusing because the handle is still available, but it''s in a "closed" state.
// We''re not saying that the window is not being blocked, we''re just saying
// that the window has been closed before the test could be run.
result = false;
}
else if (poppedWindow && poppedWindow.test) {
// This is the actual test. The client window should be fine.
result = false;
}
else {
// Else we''ll assume the window is not OK
result = true;
}
} catch (err) {
//if (console) {
// console.warn("Could not access popup window", err);
//}
}
return result;
}
Lo que hago es ejecutar esta prueba desde el padre y envolverlo en un setTimeout (), dándole al niño ventana de 3-5 segundos para cargar. En la ventana secundaria, debe agregar una función de prueba:
prueba de funcionamiento() {}
El detector de bloqueador de pop-ups prueba para ver si la función "prueba" existe como miembro de la ventana secundaria.
AÑADIDO EL 15 DE JUNIO DE 2015:
Creo que la forma moderna de manejar esto sería usar window.postMessage () para que el niño notifique al padre que la ventana se ha cargado. El enfoque es similar (el niño le dice al padre que está cargado), pero los medios de comunicación han mejorado. Pude hacer este dominio cruzado del niño:
$(window).load(function() {
this.opener.postMessage({''loaded'': true}, "*");
this.close();
});
El padre escucha este mensaje usando:
$(window).on(''message'', function(event) {
alert(event.originalEvent.data.loaded)
});
Espero que esto ayude.
Este fragmento incorpora todo lo anterior. Por alguna razón, excluye la primera y la última línea de código en el siguiente bloque de código, así que escribí un blog sobre él. Para una explicación completa y el resto del código (descargable) echa un vistazo a mi blog en thecodeabode.blogspot.com
var PopupWarning = {
init : function()
{
if(this.popups_are_disabled() == true)
{
this.redirect_to_instruction_page();
}
},
redirect_to_instruction_page : function()
{
document.location.href = "http://thecodeabode.blogspot.com";
},
popups_are_disabled : function()
{
var popup = window.open("http://localhost/popup_with_chrome_js.html", "popup_tester", "width=1,height=1,left=0,top=0");
if(!popup || popup.closed || typeof popup == ''undefined'' || typeof popup.closed==''undefined'')
{
return true;
}
window.focus();
popup.blur();
//
// Chrome popup detection requires that the popup validates itself - so we need to give
// the popup time to load, then call js on the popup itself
//
if(navigator && (navigator.userAgent.toLowerCase()).indexOf("chrome") > -1)
{
var on_load_test = function(){PopupWarning.test_chrome_popups(popup);};
var timer = setTimeout(on_load_test, 60);
return;
}
popup.close();
return false;
},
test_chrome_popups : function(popup)
{
if(popup && popup.chrome_popups_permitted && popup.chrome_popups_permitted() == true)
{
popup.close();
return true;
}
//
// If the popup js fails - popups are blocked
//
this.redirect_to_instruction_page();
}
};
PopupWarning.init();
Esto funcionó para mí:
cope.PopupTest.params = ''height=1,width=1,left=-100,top=-100,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=no,directories=no,status=no'';
cope.PopupTest.testWindow = window.open("popupTest.htm", "popupTest", cope.PopupTest.params);
if( !cope.PopupTest.testWindow
|| cope.PopupTest.testWindow.closed
|| (typeof cope.PopupTest.testWindow.closed==''undefined'')
|| cope.PopupTest.testWindow.outerHeight == 0
|| cope.PopupTest.testWindow.outerWidth == 0
) {
// pop-ups ARE blocked
document.location.href = ''popupsBlocked.htm'';
}
else {
// pop-ups are NOT blocked
cope.PopupTest.testWindow.close();
}
The outerHeight y outerWidth son para Chrome porque el truco ''about: blank'' de arriba ya no funciona en chrome.
HOLA
Modifiqué ligeramente las soluciones descritas anteriormente y creo que funciona al menos para Chrome. Mi solución está hecha para detectar si la ventana emergente está bloqueada cuando se abre la página principal, no cuando se abre la ventana emergente, pero estoy seguro de que hay algunas personas que pueden modificarla. :-) El inconveniente aquí es que se muestra la ventana emergente durante un par de segundos (es posible que se acorte un poco) cuando no hay un bloqueador de pop-ups.
Puse esto en la sección de mi ventana ''principal''
<script type="text/JavaScript" language="JavaScript">
var mine = window.open(''popuptest.htm'',''popuptest'',''width=1px,height=1px,left=0,top=0,scrollbars=no'');
if(!mine|| mine.closed || typeof mine.closed==''undefined'')
{
popUpsBlocked = true
alert(''Popup blocker detected '');
if(mine)
mine.close();
}
else
{
popUpsBlocked = false
var cookieCheckTimer = null;
cookieCheckTimer = setTimeout(''testPopup();'', 3500);
}
function testPopup()
{
if(mine)
{
if(mine.test())
{
popUpsBlocked = false;
}
else
{
alert(''Popup blocker detected '');
popUpsBlocked = true;
}
mine.close();
}
}
</script>
El popuptest se ve así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Popup test</title>
<script type="text/javascript" language="Javascript">
function test() {if(window.innerHeight!=0){return true;} else return false;}
</script>
</head>
<body>
</body>
</html>
Cuando llamo a la función de prueba en la página emergente después de 3500 ms, Chrome ha establecido correctamente innerheight.
Utilizo la variable popUpsBlocked para saber si las ventanas emergentes se muestran o no en otros javascripts. es decir
function ShowConfirmationMessage()
{
if(popUpsBlocked)
{
alert(''Popups are blocked, can not display confirmation popup. A mail will be sent with the confirmation.'');
}
else
{
displayConfirmationPopup();
}
mailConfirmation();
}
La respuesta de Jason es el único método en el que puedo pensar también, pero depender de una posición así es un poco peligroso.
En estos días, realmente no necesita hacer la pregunta "¿se bloqueó mi ventana emergente no solicitada?", Porque la respuesta es invariablemente "sí": todos los principales navegadores tienen el bloqueador de ventanas emergentes activado por defecto. El mejor enfoque es solamente window.open () en respuesta a un clic directo, que casi siempre está permitido.
La respuesta de Rich ya no funcionará para Chrome. Parece que Chrome realmente ejecuta cualquier Javascript en la ventana emergente ahora. Terminé buscando un valor de pantalla X de 0 para verificar las ventanas emergentes bloqueadas. También creo que encontré una forma de garantizar que esta propiedad sea definitiva antes de verificar. Esto solo funciona para ventanas emergentes en su dominio, pero puede agregar un controlador de carga como este:
var myPopup = window.open("site-on-my-domain", "screenX=100");
if (!myPopup)
alert("failed for most browsers");
else {
myPopup.onload = function() {
setTimeout(function() {
if (myPopup.screenX === 0)
alert("failed for chrome");
}, 0);
};
}
Como muchos han informado, la propiedad "screenX" a veces informa que no hay cero en las ventanas emergentes fallidas, incluso después de la carga. También experimenté este comportamiento, pero si agrega la verificación después de un tiempo de espera de cero ms, la propiedad screenX siempre parece generar un valor constante.
Avíseme si hay formas de hacer que este script sea más robusto. Parece que funciona para mis propósitos sin embargo.
La siguiente es una solución de jQuery para la verificación del bloqueador de pop-ups. Ha sido probado en FF (v11), Safari (v6), Chrome (v23.0.127.95) e IE (v7 y v9). Actualice la función _displayError para manejar el mensaje de error como mejor le parezca.
var popupBlockerChecker = {
check: function(popup_window){
var _scope = this;
if (popup_window) {
if(/chrome/.test(navigator.userAgent.toLowerCase())){
setTimeout(function () {
_scope._is_popup_blocked(_scope, popup_window);
},200);
}else{
popup_window.onload = function () {
_scope._is_popup_blocked(_scope, popup_window);
};
}
}else{
_scope._displayError();
}
},
_is_popup_blocked: function(scope, popup_window){
if ((popup_window.innerHeight > 0)==false){ scope._displayError(); }
},
_displayError: function(){
alert("Popup Blocker is enabled! Please add this site to your exception list.");
}
};
Uso:
var popup = window.open("http://www.google.ca", ''_blank'');
popupBlockerChecker.check(popup);
¡Espero que esto ayude! :)
Por lo que puedo decir (por lo que he probado), Chrome devuelve un objeto de ventana con la ubicación de ''sobre: en blanco''. Por lo tanto, lo siguiente debería funcionar para todos los navegadores:
var newWin = window.open(url);
if(!newWin || newWin.closed || typeof newWin.closed==''undefined'' || newWin.location==''about:blank'')
{
//POPUP BLOCKED
}
Solo una mejora del snipet de InvisibleBacon (probado en IE9, Safari 5, Chrome 9 y FF 3.6):
var myPopup = window.open("popupcheck.htm", "", "directories=no,height=150,width=150,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
if (!myPopup)
alert("failed for most browsers");
else {
myPopup.onload = function() {
setTimeout(function() {
if (myPopup.screenX === 0) {
alert("failed for chrome");
} else {
// close the test window if popups are allowed.
myPopup.close();
}
}, 0);
};
}
Tuve un problema similar con las ventanas emergentes que no se abren en Chrome. Estaba frustrado porque no estaba tratando de hacer algo furtivo, como una ventana emergente de carga, simplemente abriendo una ventana cuando el usuario hizo clic. Estaba DOBLADAMENTE frustrado porque funcionaba mi función que incluía el window.open () de la línea de comandos de Firebug, ¡mientras que al hacer clic en mi enlace no funcionaba! Aquí estaba mi solución:
Manera incorrecta: ejecutar window.open () desde un detector de eventos (en mi caso, dojo.connect con el método de evento onclick de un nodo DOM).
dojo.connect(myNode, "onclick", function() {
window.open();
}
Forma correcta: asignar una función a la propiedad onclick del nodo que llamó a window.open ().
myNode.onclick = function() {
window.open();
}
Y, por supuesto, todavía puedo hacer oyentes de eventos para el mismo evento onclick si es necesario. Con este cambio, podría abrir mis ventanas a pesar de que Chrome estaba configurado como "No permitir que ningún sitio muestre ventanas emergentes". Alegría.
Si alguien conocedor de Chrome puede decirnos a los demás por qué marca la diferencia, me encantaría escucharlo, aunque sospecho que es solo un intento de cerrar la puerta a ventanas emergentes programáticas maliciosas.
Verifique la posición de la ventana con respecto al padre. Chrome hace que la ventana aparezca casi fuera de la pantalla.
Voy a copiar / pegar la respuesta proporcionada aquí: https://.com/a/27725432/892099 por DanielB. funciona en Chrome 40 y está muy limpio. no hay trucos sucios o la espera implica.
function popup(urlToOpen) {
var popup_window=window.open(urlToOpen,"myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=400, height=400");
try {
popup_window.focus();
}
catch (e) {
alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
}
}
Wow, hay muchas soluciones aquí. Esto es mío, utiliza soluciones tomadas de la respuesta aceptada actual (que no funciona en Chrome más reciente y requiere envolverse en un tiempo de espera), así como una solución relacionada en este hilo (que en realidad es JS vainilla, no jQuery) .
Mine utiliza una arquitectura de devolución de llamada que se enviará a true cuando la ventana emergente esté bloqueada y false contrario.
window.isPopupBlocked = function(popup_window, cb)
{
var CHROME_CHECK_TIME = 2000; // the only way to detect this in Chrome is to wait a bit and see if the window is present
function _is_popup_blocked(popup)
{
return !popup.innerHeight;
}
if (popup_window) {
if (popup_window.closed) {
// opened OK but was closed before we checked
cb(false);
return;
}
if (/chrome/.test(navigator.userAgent.toLowerCase())) {
// wait a bit before testing the popup in chrome
setTimeout(function() {
cb(_is_popup_blocked(popup_window));
}, CHROME_CHECK_TIME);
} else {
// for other browsers, add an onload event and check after that
popup_window.onload = function() {
cb(_is_popup_blocked(popup_window));
};
}
} else {
cb(true);
}
};
function openPopUpWindow(format)
{
var win = window.open(''popupShow.html'',
''ReportViewer'',
''width=920px,height=720px,left=50px,top=20px,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=1,maximize:yes,scrollbars=0'');
if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0) || win.test == "undefined")
{
alert("The popup was blocked. You must allow popups to use this site.");
}
else if (win)
{
win.onload = function()
{
if (win.screenX === 0) {
alert("The popup was blocked. You must allow popups to use this site.");
win.close();
}
};
}
}