คำอธิบายโดยละเอียดเกี่ยวกับวิธีแก้ปัญหาสำหรับ window.open ที่ถูกดักจับโดยเบราว์เซอร์

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

นอกจากนี้ ยังพบว่าเมื่อ window.open ทริกเกอร์เหตุการณ์สำหรับผู้ใช้หรือถูกโหลด มันจะไม่ถูกดักจับทันที .

เมื่อเบราว์เซอร์ตรวจพบหน้าต่างป๊อปอัปใหม่ที่สร้างขึ้นโดยการดำเนินการที่ไม่ใช่ผู้ใช้ หน้าต่างนั้นจะบล็อกหน้าต่างดังกล่าว เพราะเบราว์เซอร์คิดว่านี่ไม่ใช่เพจที่ผู้ใช้ต้องการดู

ตัวอย่างเช่น หากดำเนินการโดยตรงใน js รหัสต่อไปนี้:

รหัส js:

 //เปิดหน้าโดยตรง window.open('//www.baidu.com', '_blank');

เบราว์เซอร์ ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

ไม่ว่าจะป้องกันไม่ให้ NNYYY ปรากฏขึ้นหรือไม่และสำหรับรหัสต่อไปนี้:

รหัส js:

 document.body.addEventListener('คลิก', function() { window.open('//www.baidu.com', '_blank'); });

เบราว์เซอร์ทั้งหมดจะไม่บล็อกมัน

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

1. ใช้แท็กแทน

ด้วยฟังก์ชันต่อไปนี้ การรวมฟังก์ชันนี้เข้ากับการเรียกกลับเหตุการณ์การคลิกสามารถหลีกเลี่ยงการดักจับป๊อปอัปหน้าต่างโดยเบราว์เซอร์ส่วนใหญ่:

รหัส js:

 ฟังก์ชั่น newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('target', '_blank'); ', id); // ป้องกันการบวกซ้ำ if(!document.getElementById(id)) document.body.appendChild(a);

2. ใช้วิธีการส่งแบบฟอร์มเพื่อเปิดหน้า

วิธีการนี้จำเป็นต้องสร้าง from แล้วทริกเกอร์การส่งแบบฟอร์มด้วยโค้ด js และส่งแบบฟอร์มไปยังหน้าใหม่ โค้ดนี้ยาว ดังนั้นฉันจะไม่เขียนมันที่นี่ ทุกคนรู้ว่ามี a สารละลาย.

โปรดทราบว่าทั้งสองวิธีข้างต้นไม่เหมาะที่จะวางไว้ในฟังก์ชันการโทรกลับ ajax หากวางไว้ในฟังก์ชันการโทรกลับ พวกเขาจะยังคงถูกดักฟังโดยเบราว์เซอร์

3. ทางออกที่ดีที่สุด - เปิดหน้าต่างขึ้นมาก่อน จากนั้นจึงเปลี่ยนเส้นทาง

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

รหัส js:

 xx.addEventListener('click', function () { // เปิดหน้า วิธีที่ดีที่สุดคือใช้หน้าพร้อมท์ที่นี่ var newWin = window.open('loading page'); ajax().done(function() { // ทำซ้ำตรงไปยังหน้าเป้าหมาย newWin.location.href = 'target url' });

วิธีการข้างต้นจะเปิดที่อยู่สองแห่ง ดังนั้นขอแนะนำให้คุณระบุข้อความที่คล้ายกับ "กำลังโหลดหน้าปัจจุบัน โปรดรอสักครู่" เมื่อเปิดที่อยู่แรก - หน้าพร้อมท์ที่เรียบง่ายของซึ่งสามารถหลีกเลี่ยงการเปิดหน้าเป้าหมายจริงสองครั้ง และให้ผู้ใช้สังเกตเห็นการเปลี่ยนเส้นทางของหน้า

แนวทางที่สอง:

 <a href=javascript:; onclick=dialog();>คลิกหน้าต่างป๊อปอัป</a><script>function dial(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json ', async: false, // สิ่งนี้จะต้องถูกกำหนดเป็นข้อมูลซิงโครนัส: {param1: 'value1'}, ความสำเร็จ: function(data){ window.open(data.url, '_blank'); //Initiate a หน้าต่างป๊อปอัป} })} </สคริปต์>

ข้อเสียของวิธีนี้:

การทดสอบจริงสามารถแก้ปัญหาการสกัดกั้นของเบราว์เซอร์ส่วนใหญ่ได้ แต่ไม่สามารถแก้ปัญหาการสกัดกั้นซอฟต์แวร์ความปลอดภัยได้ (360 จะไม่สกัดกั้น แต่ QQ Butler จะทำได้)

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network