propiedades - ventanas con javascript

Abre una nueva pestaña sin bloqueador de pop-ups después de la llamada ajax al hacer clic en el usuario

Question

Tengo una página que permite al usuario realizar la manipulación de imágenes a través del lienzo de HTML5, en la página, hay un botón de compartir de Facebook para compartir una imagen generada del lienzo en Facebook.

Cuando se hace clic en el enlace, se envía una solicitud de ajax al servidor (ASP.NET MVC) para realizar la generación de la imagen, guardarla en el servidor y luego generar una url (que enlaza con la imagen) que se devuelve como ajax. respuesta. La url devuelta es lo que quiero pasar como el parámetro para compartir en Facebook. El problema es que el bloqueador de pop-ups está bloqueando el diálogo de compartir Facebook cuando llamo "window.open".

¿Hay alguna otra manera de abrir una pestaña nueva sin bloqueador de ventanas emergentes? Creo que desde que el usuario inició la acción, debería haber una forma de evitar el bloqueador de pop-ups. Gracias.

Answer 1

Así es cómo resolví el problema de mi solicitud async ajax perdiendo el contexto de confianza:

Abrí la ventana emergente directamente en el clic de los usuarios, dirigí la URL a about:blank y obtuve un control en esa ventana. Probablemente puedas dirigir la ventana emergente a una URL de "carga" mientras se realiza tu solicitud de ajax

var myWindow = window.open("about:blank",''name'',''height=500,width=550'');

Luego, cuando mi solicitud es exitosa, abro mi url de devolución de llamada en la ventana

function showWindow(win, url) {
    win.open(url,''name'',''height=500,width=550'');
}

Answer 2

La respuesta de es la que me puso en el camino correcto. Aquí hay una función que con suerte ilustra la técnica más claramente.

function openNewAjaxTab(url) {
    var tabOpen = window.open("about:blank", ''newtab''),
        xhr = new XMLHttpRequest();

    xhr.open("GET", ''/get_url?url='' + encodeURIComponent(url), true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            tabOpen.location = xhr.responseText;
        }
    }
    xhr.send(null);
}

Answer 3

Respuesta corta: haga que la solicitud de ajax sea sincrónica.

Respuesta completa: un navegador solo abrirá una pestaña / ventana emergente sin la advertencia del bloqueador de ventanas emergentes, si el comando para abrir la pestaña / ventana emergente proviene de un evento de confianza . Eso significa que el usuario debe hacer clic activamente en algún lugar para abrir una ventana emergente.

En su caso, el usuario realiza un clic para que tenga el evento de confianza. Sin embargo, pierdes ese contexto confiable al realizar la solicitud de Ajax. Su controlador de éxito ya no tiene ese evento. La única forma de eludir esto es realizar una solicitud síncrona de Ajax que bloqueará su navegador mientras se ejecuta, pero conservará el contexto del evento.

En jQuery esto debería hacer el truco:

$.ajax({
 url: ''http://yourserver/'',
 data: ''your image'',
 success: function(){window.open(someUrl);},
 async: false
});

Actualización de octubre de 2014:

Se observó correctamente en los comentarios, que Firefox ha dejado de usar la configuración síncrona en junio de 2014, pero todavía funciona en este navegador.

Además, Chrome recibió actualizaciones que solo permitirán que esto funcione como se desea si la llamada ajax vuelve en menos de un segundo. Lo cual es bastante difícil de garantizar. Creé otra pregunta dedicada al tiempo de espera de Chrome: Ajax sincrónico: ¿Chrome tiene un tiempo de espera en eventos de confianza?

La publicación vinculada contiene un JSFiddle que demuestra este concepto y el problema.