Bỏ qua trình chặn cửa sổ bật lên trên window.open khi JQuery event.preventDefault () được đặt

Tôi muốn hiển thị hộp thoại JQuery có điều kiện khi nhấp vào sự kiện của một siêu kết nối.

Tôi có một yêu cầu như trên condition1 mở đối thoại JQuery và nếu điều kiện1 không được đáp ứng, hãy điều hướng đến trang được tham chiếu bởi thẻ 'href' của sự kiện nhấp chuột đang được đề cập.

Tôi có thể gọi một hàm trên sự kiện nhấp chuột của liên kết. Hàm này hiện kiểm tra điều kiện đã nói bằng cách thực thi một URL khác (thực thi bộ điều khiển Spring của tôi và trả về phản hồi).

Tất cả đều hoạt động hoàn hảo chỉ có window.open bị chặn bởi trình chặn cửa sổ bật lên.

$('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);
        }
    });
});

Nếu tôi xóa e.preventDefault();khỏi mã, trình chặn popoup sẽ không chặn trang, tuy nhiên đối với condition1 thì nó sẽ mở hộp thoại cũng như mở trang 'href'.

Nếu tôi giải quyết một vấn đề, nó sẽ tạo ra vấn đề cho một vấn đề khác. Tôi không thể đưa ra công lý cho cả hai điều kiện đồng thời.

Bạn có thể giúp tôi giải quyết vấn đề này xin vui lòng?

Khi điều này được giải quyết, tôi có một vấn đề khác cần giải quyết, tức là điều hướng trên sự kiện OK của đối thoại :)

Trình chặn cửa sổ bật lên thường sẽ chỉ cho phép window.opennếu được sử dụng trong quá trình xử lý sự kiện của người dùng (như một lần nhấp). Trong trường hợp của bạn, bạn đang gọi window.open sau , không phải trong sự kiện, vì $.getJSONkhông đồng bộ.

Bạn có hai lựa chọn:

1. Làm điều gì đó khác, thay vì window.open.

2. Làm cho cuộc gọi ajax đồng bộ, đây là điều bạn thường nên tránh như bệnh dịch hạch vì nó khóa giao diện người dùng của trình duyệt. $.getJSONtương đương với:

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

   ... và do đó, bạn có thể thực hiện $.getJSONcuộc gọi của mình đồng bộ bằng cách ánh xạ các tham số của bạn với các tham số ở trên và thêm 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);
           }
       }
   });

   Một lần nữa, tôi không ủng hộ các lệnh gọi ajax đồng bộ nếu bạn có thể tìm thấy bất kỳ cách nào khác để đạt được mục tiêu của mình. Nhưng nếu bạn không thể, bạn sẽ làm được.

   Dưới đây là một ví dụ về mã không thành công trong quá trình kiểm tra do lệnh gọi không đồng bộ:

   Ví dụ trực tiếp | Nguồn trực tiếp (Các liên kết trực tiếp không còn hoạt động do các thay đổi đối với JSBin)

   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");
       });
     });
   });

   Và đây là một ví dụ hoạt động, sử dụng lệnh gọi đồng bộ:

   Ví dụ trực tiếp | Nguồn trực tiếp (Các liên kết trực tiếp không còn hoạt động do các thay đổi đối với JSBin)

   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");
         }
       });
     });
   });

bạn có thể gọi window.open mà không cần trình duyệt chặn chỉ khi người dùng thực hiện trực tiếp một số hành động. Trình duyệt gửi một số cờ và xác định cửa sổ đó được mở bởi hành động của người dùng.

Vì vậy, bạn có thể thử kịch bản này:

1. var myWindow = window.open ('')
2. vẽ bất kỳ thông báo đang tải nào trong cửa sổ này
3. khi yêu cầu hoàn tất, chỉ cần gọi myWindow.location = ' http://google.com '

Tôi gặp sự cố này và tôi chưa chuẩn bị sẵn url của mình cho đến khi lệnh gọi lại sẽ trả về một số dữ liệu. Giải pháp là mở cửa sổ trống trước khi bắt đầu gọi lại và sau đó chỉ cần đặt vị trí khi gọi lại trở lại.

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

hãy thử cái này, nó phù hợp với tôi,

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

Là fiddle cho http://jsfiddle.net/safeeronline/70kdacL4/1/ này

Windows phải được tạo trên cùng một ngăn xếp (hay còn gọi là microtask ) với sự kiện do người dùng khởi tạo, ví dụ: cuộc gọi lại lần nhấp - vì vậy, chúng không thể được tạo không đồng bộ sau này.

Tuy nhiên, bạn có thể tạo một cửa sổ mà không có URL và sau đó bạn có thể thay đổi URL của cửa sổ đó khi bạn đã biết , ngay cả khi không đồng bộ!

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);
}

Các trình duyệt hiện đại sẽ mở cửa sổ với một trang trống (thường được gọi là about:blank) và giả sử tác vụ không đồng bộ của bạn để lấy URL diễn ra khá nhanh, thì UX kết quả hầu hết đều ổn. Thay vào đó, nếu bạn muốn hiển thị thông báo đang tải (hoặc bất kỳ thứ gì) vào cửa sổ trong khi người dùng chờ đợi, bạn có thể sử dụng URI dữ liệu .

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

Mã này giúp tôi. Hy vọng điều này sẽ giúp một số người

$('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';

    });
});

Hãy thử sử dụng một phần tử liên kết và nhấp vào nó bằng javascriipt

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

và kịch bản

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

Sử dụng nó như thế này

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

Quan sát rằng sự kiện phải do người dùng bắt đầu đã giúp tôi tìm ra phần đầu tiên của điều này, nhưng ngay cả sau đó Chrome và Firefox vẫn chặn cửa sổ mới. Phần thứ hai là thêm target = "_ blank" vào liên kết, được đề cập trong một nhận xét.

Tóm lại: bạn cần gọi window.open từ một sự kiện do người dùng khởi tạo, trong trường hợp này là nhấp vào một liên kết và liên kết đó cần có target = "_ blank".

Trong ví dụ bên dưới, liên kết đang sử dụng 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";

điều này đã làm việc cho tôi.

Tôi đang sử dụng phương pháp này để tránh trình chặn cửa sổ bật lên trong mã React của mình. nó cũng sẽ hoạt động trong tất cả các mã javascript khác.

Khi bạn đang thực hiện cuộc gọi không đồng bộ trên sự kiện nhấp chuột, trước tiên chỉ cần mở một cửa sổ trống và sau đó viết URL vào đó sau khi lệnh gọi không đồng bộ sẽ hoàn tất.

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

về thành công của cuộc gọi không đồng bộ, hãy viết như sau

popupWindow.document.write(resonse.url)