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?
– hugocsl
Similar Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1350833#C9 ? Or: https://github.com/mozilla-mobile/firefox-ios/issues/2481
– Maury Developer
I don’t work the ideas quoted! :(
– Renato Machado
Which iPhone you’re using?
– Sam
tested on iPhone 6s, 5 and 7
– Renato Machado
Chrome and Firefox you tested were on iPhone or desktop?
– Sam
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) andfetch
... I converted everything to the oldest mode usingXMLHttpRequest
instead offetch
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.– Sam
I also tried with ajax and it didn’t work. only works window.open, this test on the same iPhone templates.
– Renato Machado