ข้ามตัวป้องกันป๊อปอัปบน window.open เมื่อตั้งค่า JQuery event.preventDefault ()

Question 1

ฉันต้องการแสดงกล่องโต้ตอบ JQuery ตามเงื่อนไขเมื่อคลิกเหตุการณ์ของไฮเปอร์ลิงก์

ฉันมีข้อกำหนดเช่นใน condition1 ให้เปิดกล่องโต้ตอบ JQuery และหากเงื่อนไข 1 ไม่เป็นที่พอใจให้ไปที่หน้าที่อ้างอิงโดยแท็ก "href" ของเหตุการณ์การคลิกที่มีปัญหา

ฉันสามารถเรียกใช้ฟังก์ชันในเหตุการณ์คลิกของลิงก์ได้ ขณะนี้ฟังก์ชันนี้ตรวจสอบเงื่อนไขดังกล่าวโดยเรียกใช้ URL อื่น (ซึ่งเรียกใช้ตัวควบคุม Spring ของฉันและส่งคืนการตอบสนอง)

ทั้งหมดทำงานได้อย่างสมบูรณ์แบบมีเพียง window.open ที่ถูกบล็อกโดยตัวป้องกันป๊อปอัป

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

หากฉันลบออกe.preventDefault();จากโค้ดตัวป้องกันป๊อปอัปจะไม่บล็อกหน้าอย่างไรก็ตามสำหรับ condition1 จะเปิดกล่องโต้ตอบและเปิดหน้า 'href'

ถ้าฉันแก้ปัญหาหนึ่งมันจะสร้างปัญหาให้กับอีกคน ฉันไม่สามารถให้ความยุติธรรมกับเงื่อนไขทั้งสองพร้อมกันได้

คุณช่วยฉันแก้ปัญหานี้ได้ไหม

เมื่อแก้ไขได้แล้วฉันมีปัญหาอื่นที่ต้องแก้ไขเช่นการนำทางในเหตุการณ์ตกลงของบทสนทนา :)

Question 2

โดยทั่วไปตัวบล็อกป๊อปอัปจะอนุญาตก็ต่อwindow.openเมื่อใช้ในระหว่างการประมวลผลเหตุการณ์ของผู้ใช้ (เช่นการคลิก) ในกรณีของคุณคุณกำลังโทรหาในwindow.open ภายหลังไม่ใช่ในระหว่างกิจกรรมเนื่องจาก$.getJSONเป็นแบบอะซิงโครนัส

คุณมีสองทางเลือก:

window.openทำอย่างอื่นมากกว่า
ทำให้ ajax โทรแบบซิงโครนัสซึ่งเป็นสิ่งที่ปกติคุณควรหลีกเลี่ยงเช่นโรคระบาดเนื่องจากมันล็อก UI ของเบราว์เซอร์ $.getJSONเทียบเท่ากับ:
```
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});
```
... และเพื่อให้คุณสามารถ$.getJSONโทรแบบซิงโครนัสได้โดยการแมปพารามิเตอร์ของคุณกับด้านบนและเพิ่ม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);
        }
    }
});
```
อีกครั้งฉันไม่สนับสนุนการโทร ajax แบบซิงโครนัสหากคุณสามารถหาวิธีอื่นในการบรรลุเป้าหมายได้ แต่ถ้าทำไม่ได้ก็ไป

นี่คือตัวอย่างของรหัสที่ไม่ผ่านการทดสอบเนื่องจากการโทรแบบอะซิงโครนัส:

~~ตัวอย่างสด | แหล่งที่มาแบบสด~~ (ลิงก์ถ่ายทอดสดไม่ทำงานอีกต่อไปเนื่องจากมีการเปลี่ยนแปลง 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");
    });
  });
});
```
และนี่คือตัวอย่างที่ใช้งานได้โดยใช้การโทรแบบซิงโครนัส:

~~ตัวอย่างสด | แหล่งที่มาแบบสด~~ (ลิงก์ถ่ายทอดสดไม่ทำงานอีกต่อไปเนื่องจากมีการเปลี่ยนแปลง 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");
      }
    });
  });
});
```

Question 3

คุณสามารถเรียก window.open โดยไม่ปิดกั้นเบราว์เซอร์เฉพาะในกรณีที่ผู้ใช้ดำเนินการบางอย่างโดยตรง เบราว์เซอร์ส่งแฟล็กและกำหนดว่าหน้าต่างนั้นเปิดขึ้นโดยการกระทำของผู้ใช้

ดังนั้นคุณสามารถลองสถานการณ์นี้:

var myWindow = window.open ('')

วาดข้อความโหลดในหน้าต่างนี้

เมื่อขอเสร็จแล้วเพียงโทรหา myWindow.location = ' http://google.com '

Question 4

ฉันมีปัญหานี้และฉันไม่มี url พร้อมจนกว่าการติดต่อกลับจะส่งคืนข้อมูลบางส่วน วิธีแก้ปัญหาคือเปิดหน้าต่างเปล่าก่อนเริ่มการโทรกลับจากนั้นตั้งค่าตำแหน่งเมื่อการโทรกลับกลับมา

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

Question 5

ลองใช้มันได้ผลสำหรับฉัน

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

เป็นซอสำหรับนี้http://jsfiddle.net/safeeronline/70kdacL4/1/

Question 6

ต้องสร้าง Windows บนสแต็กเดียวกัน (หรือที่เรียกว่าmicrotask ) เป็นเหตุการณ์ที่เริ่มโดยผู้ใช้เช่นการเรียกกลับการคลิกดังนั้นจึงไม่สามารถสร้างได้ในภายหลังแบบอะซิงโครนัส

อย่างไรก็ตามคุณสามารถสร้างหน้าต่างโดยไม่ต้องใช้ URLจากนั้นคุณสามารถเปลี่ยน URL ของหน้าต่างนั้นได้เมื่อคุณรู้แล้วแม้กระทั่งแบบอะซิงโครนัส!

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

เบราว์เซอร์สมัยใหม่จะเปิดหน้าต่างด้วยหน้าว่าง (มักเรียกว่าabout:blank) และสมมติว่างาน async ของคุณเพื่อรับ URL นั้นค่อนข้างรวดเร็ว UX ที่ได้ส่วนใหญ่จะใช้ได้ดี หากคุณต้องการแสดงข้อความโหลด (หรืออะไรก็ได้) ในหน้าต่างในขณะที่ผู้ใช้รอคุณสามารถใช้URI ข้อมูลได้

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

Question 7

รหัสนี้ช่วยฉันด้วย หวังว่านี่จะช่วยคนได้บ้าง

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

    });
});

Question 8

ลองใช้ไฟล์ องค์ประกอบลิงค์แล้วคลิกด้วย javascriipt

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

และสคริปต์

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

ใช้แบบนี้ครับ

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

Question 9

การสังเกตว่าเหตุการณ์ต้องเริ่มโดยผู้ใช้ช่วยให้ฉันทราบส่วนแรกของสิ่งนี้ แต่หลังจากนั้น Chrome และ Firefox ก็ยังคงบล็อกหน้าต่างใหม่ ส่วนที่สองคือการเพิ่ม target = "_ blank" ในลิงก์ซึ่งกล่าวถึงในหนึ่งความคิดเห็น

โดยสรุป: คุณต้องเรียก window.open จากเหตุการณ์ที่ผู้ใช้เริ่มต้นในกรณีนี้ให้คลิกที่ลิงก์และลิงก์นั้นจะต้องมี target = "_ blank"

ในตัวอย่างด้านล่างลิงก์กำลังใช้ 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');
});

Question 10

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

สิ่งนี้ได้ผลสำหรับฉัน

Question 11

ฉันใช้วิธีนี้เพื่อหลีกเลี่ยงตัวป้องกันป๊อปอัปในรหัสการตอบสนองของฉัน มันจะทำงานในรหัสจาวาสคริปต์อื่น ๆ ทั้งหมดด้วย

เมื่อคุณทำการโทรแบบ async เมื่อคลิกเหตุการณ์ให้เปิดหน้าต่างว่างก่อนจากนั้นจึงเขียน URL ในภายหลังเมื่อการเรียกแบบ async เสร็จสมบูรณ์

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

ในความสำเร็จของการโทรแบบ async ให้เขียนสิ่งต่อไปนี้

popupWindow.document.write(resonse.url)