Umgehen Sie den Popup-Blocker in window.open, wenn JQuery event.preventDefault () festgelegt ist

Ich möchte ein JQuery-Dialogfeld unter Vorbehalt des Klickereignisses eines Hyperlinks anzeigen.

Ich habe eine Anforderung wie unter Bedingung1: Öffnen Sie einen JQuery-Dialog. Wenn Bedingung1 nicht erfüllt ist, navigieren Sie zu der Seite, auf die durch das 'href'-Tag verwiesen wird, dessen Klickereignis in Frage kommt.

Ich kann eine Funktion für das Klickereignis des Links aufrufen. Diese Funktion überprüft nun diesen Zustand, indem sie eine andere URL ausführt (die meinen Spring-Controller ausführt und eine Antwort zurückgibt).

Alles funktioniert perfekt, wenn nur window.open vom Popup-Blocker blockiert wird.

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

Wenn ich e.preventDefault();aus dem Code entferne , blockiert der Popoup-Blocker die Seite nicht, öffnet jedoch für Bedingung1 den Dialog sowie die Seite 'href'.

Wenn ich eines löse, entsteht ein Problem für ein anderes. Ich kann nicht beiden Bedingungen gleichzeitig gerecht werden.

Könnten Sie mir bitte helfen, dieses Problem zu lösen?

Sobald dies gelöst ist, muss ich ein weiteres Problem lösen, nämlich die Navigation im OK-Ereignis des Dialogs :)

Popup-Blocker sind normalerweise nur zulässig, window.openwenn sie während der Verarbeitung eines Benutzerereignisses verwendet werden (z. B. durch Klicken). In Ihrem Fall rufen Sie window.open später an , nicht während des Ereignisses, da $.getJSONes asynchron ist.

Sie haben zwei Möglichkeiten:

1. Mach etwas anderes als window.open.

2. Machen Sie den Ajax-Aufruf synchron, was Sie normalerweise vermeiden sollten, wie die Pest, da sie die Benutzeroberfläche des Browsers blockiert. $.getJSONist äquivalent zu:

   $.ajax({
     url: url,
     dataType: 'json',
     data: data,
     success: callback
   });

   ... und so können Sie Ihren $.getJSONAnruf synchronisieren, indem Sie Ihre Parameter den oben genannten zuordnen und Folgendes hinzufügen async: false:

   $.ajax({
       url:      "redirect/" + pageId,
       async:    false,
       dataType: "json",
       data:     {},
       success:  function(status) {
           if (status == null) {
               alert("Error in verifying the status.");
           } else if(!status) {
               $("#agreement").dialog("open");
           } else {
               window.open(redirectionURL);
           }
       }
   });

   Auch hier befürworte ich keine synchronen Ajax-Anrufe, wenn Sie einen anderen Weg finden, um Ihr Ziel zu erreichen. Aber wenn du nicht kannst, los geht's.

   Hier ist ein Beispiel für Code, der den Test aufgrund des asynchronen Aufrufs nicht besteht:

   Live Beispiel | Live-Quelle (Die Live-Links funktionieren aufgrund von Änderungen an JSBin nicht mehr.)

   jQuery(function($) {
     // This version doesn't work, because the window.open is
     // not during the event processing
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.getJSON("http://jsbin.com/uriyip", function() {
         window.open("http://jsbin.com/ubiqev");
       });
     });
   });

   Und hier ist ein Beispiel, das mit einem synchronen Aufruf funktioniert:

   Live Beispiel | Live-Quelle (Die Live-Links funktionieren aufgrund von Änderungen an JSBin nicht mehr.)

   jQuery(function($) {
     // This version does work, because the window.open is
     // during the event processing. But it uses a synchronous
     // ajax call, locking up the browser UI while the call is
     // in progress.
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.ajax({
         url:      "http://jsbin.com/uriyip",
         async:    false,
         dataType: "json",
         success:  function() {
           window.open("http://jsbin.com/ubiqev");
         }
       });
     });
   });

Sie können window.open ohne Browserblockierung nur aufrufen, wenn der Benutzer direkt eine Aktion ausführt. Der Browser sendet ein Flag und bestimmt das durch Benutzeraktion geöffnete Fenster.

Sie können dieses Szenario also ausprobieren:

1. var myWindow = window.open ('')
2. Zeichnen Sie eine Lademeldung in dieses Fenster
3. Wenn die Anfrage fertig ist, rufen Sie einfach myWindow.location = ' http://google.com ' auf.

Ich hatte dieses Problem und hatte meine URL nicht bereit, bis der Rückruf einige Daten zurückgab. Die Lösung bestand darin, vor dem Starten des Rückrufs ein leeres Fenster zu öffnen und dann den Ort festzulegen, an dem der Rückruf zurückkehrt.

$scope.testCode = function () {
    var newWin = $window.open('', '_blank');
    service.testCode().then(function (data) {
        $scope.testing = true;
        newWin.location = '/Tests/' + data.url.replace(/["]/g, "");
    });
};

versuchen Sie dies, es funktioniert für mich,

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            redirectWindow.location;
        }
    });
});

Ist Geige für diese http://jsfiddle.net/safeeronline/70kdacL4/1/

Windows muss auf demselben Stapel (auch als Mikrotask bezeichnet ) wie das vom Benutzer initiierte Ereignis erstellt werden, z. B. ein Klick-Rückruf. Sie können daher später nicht asynchron erstellt werden.

Sie können jedoch ein Fenster ohne URL erstellen und die URL dieses Fensters ändern, sobald Sie sie kennen , auch asynchron!

window.onclick = () => {
  // You MUST create the window on the same event
  // tick/stack as the user-initiated event (e.g. click callback)
  const googleWindow = window.open();

  // Do your async work
  fakeAjax(response => {
    // Change the URL of the window you created once you
    // know what the full URL is!
    googleWindow.location.replace(`https://google.com?q=${response}`);
  });
};

function fakeAjax(callback) {
  setTimeout(() => {
    callback('example');
  }, 1000);
}

Moderne Browser öffnen das Fenster mit einer leeren Seite (oft aufgerufen about:blank). Wenn Ihre asynchrone Aufgabe zum Abrufen der URL ziemlich schnell ist, ist die resultierende UX meistens in Ordnung. Wenn Sie stattdessen eine Lademeldung (oder etwas anderes) in das Fenster rendern möchten, während der Benutzer wartet, können Sie Daten-URIs verwenden .

window.open('data:text/html,<h1>Loading...<%2Fh1>');

Dieser Code hilft mir. Hoffe das hilft einigen Leuten

$('formSelector').submit( function( event ) {

    event.preventDefault();

    var newWindow = window.open('', '_blank', 'width=750,height=500');

    $.ajax({

        url: ajaxurl,
        type: "POST",
        data: { data },

    }).done( function( response ) {

        if ( ! response ) newWindow.close();
        else newWindow.location = '/url';

    });
});

Versuchen Sie, eine mit einem Link - Elemente und klicken Sie mit javascriipt

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

und das Skript

function openURL(url) {
    document.getElementById("SimulateOpenLink").href = url
    document.getElementById("SimulateOpenLink").click()
}

Verwenden Sie es so

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link

Die Beobachtung, dass das Ereignis vom Benutzer initiiert werden musste, half mir, den ersten Teil davon herauszufinden, aber auch danach blockierten Chrome und Firefox das neue Fenster. Der zweite Teil war das Hinzufügen von target = "_ blank" zu dem Link, der in einem Kommentar erwähnt wurde.

Zusammenfassend: Sie müssen window.open von einem vom Benutzer initiierten Ereignis aus aufrufen, in diesem Fall auf einen Link klicken, und dieser Link muss target = "_ blank" haben.

Im folgenden Beispiel verwendet der Link class = "button-twitter".

$('.button-twitter').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});

var url = window.open("", "_blank");
url.location = "url";

das hat bei mir funktioniert.

Ich verwende diese Methode, um den Popup-Blocker in meinem Reaktionscode zu vermeiden. Es funktioniert auch in allen anderen Javascript-Codes.

Wenn Sie beim Klicken einen asynchronen Aufruf tätigen, öffnen Sie zuerst ein leeres Fenster und schreiben Sie die URL später ein, wenn ein asynchroner Aufruf abgeschlossen ist.

const popupWindow = window.open("", "_blank");
popupWindow.document.write("<div>Loading, Plesae wait...</div>")

Schreiben Sie nach dem Erfolg eines asynchronen Aufrufs Folgendes

popupWindow.document.write(resonse.url)