Does not open new tab using window.open in Safari on mobile

Asked

Viewed 147 times

0

Hi. I’m having trouble with window.open on Safari on iPhone. I created a Landing Page to view, a pdf in the browser, and send catalogs by email. Clicking the button does not open a new pdf page. Chorme and firefox works.

Follows my code

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector("#enviar").addEventListener('click', function() {
        document.querySelector(".mensagem-sucesso").style.display = "none";
        document.querySelector(".mensagem-erro").style.display = "none";
        document.querySelector(".mensagem-erro").innerHTML = "";



        let nome = document.querySelector("[name=name]")
        let mail = document.querySelector("[name=email]")
        let fone = document.querySelector("[name=phone]")
        let captcha = document.querySelector("[name=g-recaptcha-response]")

        let required = [nome, mail, fone];

        let hasInvalidField = required.filter(item => !item.value)

        if(hasInvalidField.length) {
            document.querySelector(".mensagem-erro").innerHTML = `
                ${hasInvalidField
                    .map(field => field.getAttribute('placeholder'))
                    .join(", ")} são obrigatórios`

            document.querySelector(".mensagem-erro").style.display = "block";
            return ; 
        }

        if(!validateEmail(mail.value)) {
            document.querySelector(".mensagem-erro").innerHTML = `Por favor, forneça um email válido.`
            document.querySelector(".mensagem-erro").style.display = "block";
            return ; 
        }



        let formData = new FormData();
        formData.append("nome", nome.value);
        formData.append("email", mail.value);
        formData.append("telefone", fone.value);
        formData.append("g-recaptcha-response", captcha.value);

        document.querySelector("#enviar").innerHTML = "Enviando..."
        document.querySelector("#enviar").setAttribute("disabled", "disabled")
        fetch('form-captcha.php', {
            method: "post",
            type:"json",
            body: formData
        }).then(response => {
            document.querySelector(".mensagem-sucesso").style.display = "none";
            document.querySelector(".mensagem-erro").style.display = "none";
            document.querySelector(".mensagem-erro").innerHTML = "";
            response.json().then(data => {
                document.querySelector("#enviar").innerHTML = "BAIXAR CATÁLOGO"
                document.querySelector("#enviar").removeAttribute("disabled")
                if(data.status) {
                    document.querySelector(".mensagem-sucesso").style.display = "block"
                    //window.open("catalogo-nova-visao.pdf", "_blank")




window.open(url,'_blank', 'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes')





                } else {
                    document.querySelector(".mensagem-erro").style.display = "block"
                    document.querySelector(".mensagem-erro").innerHTML = `${data.errorMessage} ${data.error ? `(${data.error})` : ''}`
                }
            })
        })
    });


});
  • Have you checked if it is not some browser security policy, or some config of type Adblock that is blocking the popup?

  • Similar Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1350833#C9 ? Or: https://github.com/mozilla-mobile/firefox-ios/issues/2481

  • I don’t work the ideas quoted! :(

  • Which iPhone you’re using?

  • tested on iPhone 6s, 5 and 7

  • Chrome and Firefox you tested were on iPhone or desktop?

  • Well, I tested it here on an old iPhone (4S) and it uses Safari 9, which is not compatible with ES6 (let, Arrow functions, template literals) and fetch... I converted everything to the oldest mode using XMLHttpRequest instead of fetch and it worked, but the window.open didn’t work inside Ajax, only outside it. From iPhone 5 I think already uses Safari 10 or 11 (I’m not sure) that I believe it is compatible with ES6 (I’m not sure), but even so I think window.open does not open inside Ajax. The browser blocks.

  • I also tried with ajax and it didn’t work. only works window.open, this test on the same iPhone templates.

Show 3 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.