web-dev-qa-db-fra.com

Ouvrir la page dans une nouvelle fenêtre sans blocage de popup

J'espère que vous pouvez aider un peu ici ... J'ai un formulaire qui traduit un mot dans un champ, remplissez le champ avec le terme traduit, puis effectuez une action tout en un seul bouton de soumission.

la soumission est faite par jquery. le problème est que la page cible est bloquée car les 3 principaux navigateurs la traitent comme une popup, savez-vous comment la laisser s'ouvrir comme un nouvel onglet ou une nouvelle fenêtre? Je ne veux pas définir la cible comme _self car je veux que les gens ouvrent également mon site.

Je crois que le problème est dans cette chaîne:

document.forms.form1.submit();

mais je sais aussi qu'il devrait y avoir un moyen de le reformuler pour que la cible ne soit pas traitée comme une popup.

voici le script:

<script type="text/javascript">

$(function transle() {
  $('#transbox').sundayMorningReset();
  $('#transbox input[type=button]').click(function(evt) {
    $.sundayMorning(
      $('#transbox input[type=text]').val(), {
        source: '',
        destination: 'ZH',
        menuLeft: evt.pageX,
        menuTop: evt.pageY
      },
      function(response) {
        $('#transbox input[type=text]').val(response.translation);

        //document.getElementById("form1").submit();
        document.forms.form1.submit();

      }
    );
  });
});

</script>

et voici la forme:

<table id="transbox" name="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
  <form action="custom-page" method="get" name="form1" target="_blank" id="form1">

    <tr>
      <td>
        <input id="q" name="q" type="text" class="search_input" onFocus="if (this.value == 'Evening dress') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Evening dress';}" value="Evening dress" />
      </td>
      <td>
        <input type="button" value="Find" style="color: #333; width: 157px; font-weight:bold"></input>
      </td>
    </tr>

  </form>
</table>

MODIFIER

J'ai essayé toutes ces chaînes de soumettre:

document.getElementById("form1").submit();
document.forms.form1.submit();
form1.submit();

tout se termine avec la cible bloquée par popup. s'il vous plaît, existe-t-il une autre façon de faire le code pour ne pas le laisser apparaître?

devrait peut-être utiliser le onsubmit pour faire jQuery? quelqu'un sait comment?

javascriptjquerypopup
36
li.

Un navigateur n'ouvrira un onglet/popup sans l'avertissement du bloqueur de popups que si la commande pour ouvrir l'onglet/popup vient d'un événement de confiance . Cela signifie que l'utilisateur doit cliquer activement quelque part pour ouvrir une fenêtre contextuelle.

Dans votre cas, l'utilisateur effectue un clic pour que vous ayez l'événement de confiance. Cependant, vous perdez ce contexte approuvé en exécutant la demande Ajax. Votre gestionnaire de réussite n'a plus cet événement. La seule façon de contourner cela est d'effectuer une requête Ajax synchrone qui bloquera votre navigateur pendant son exécution, mais préservera le contexte de l'événement.

Dans jQuery, cela devrait faire l'affaire:

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

Voici votre réponse: Ouvrir un nouvel onglet sans bloqueur de popup après un appel ajax sur le clic de l'utilisateur

75
Bảo Nam

En règle générale, les bloqueurs de fenêtres publicitaires ciblent les fenêtres qui se lancent sans interaction de l'utilisateur. Habituellement, un événement de clic peut ouvrir une fenêtre sans qu'elle ne soit bloquée. (sauf si c'est un très mauvais bloqueur de popups)

Essayez de lancer après un événement de clic

10
Coomie

C'est le seul qui a vraiment fonctionné pour moi dans tous les navigateurs

let newTab = window.open(); newTab.location.href = url;

7
pomobc

PS> J'ai posté cette réponse sur une question connexe. Voici comment j'ai résolu le problème de ma demande ajax asynchrone en perdant le contexte de confiance:

J'ai ouvert le popup directement sur le clic des utilisateurs, dirigé l'url vers about:blank Et obtenu une poignée sur cette fenêtre. Vous pourriez probablement diriger le popup vers une URL de "chargement" pendant que votre demande ajax est faite

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

Ensuite, lorsque ma demande est acceptée, j'ouvre mon URL de rappel dans la fenêtre

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

Pour le bouton Soumettre, ajoutez ce code, puis définissez votre formulaire target = "newwin"

onclick=window.open("about:blank","newwin")
4
Alan Gochin