ฉันแค่อยากสร้างสิ่งเล็กๆ ที่รวม winform เข้ากับ html5 จู่ๆ ฉันก็สนใจและต้องการฝัง WeChat เวอร์ชันเว็บไว้ในนั้น
เอาล่ะ ทันทีที่มีความคิดเกิดขึ้น ให้ดำเนินการ ผลสุดท้ายจะเป็นดังนี้:
จากจุดเริ่มต้น ฉันวางแผนที่จะฝัง iframe ในหน้าและชี้ไปที่ https://wx.qq.com ซึ่งก็โอเค แต่ฉันก็ยังไร้เดียงสาเกินไป และเวอร์ชันเว็บ WeChat จะข้ามไปโดยอัตโนมัติ ผลลัพธ์จะเป็นดังนี้:
ดังนั้นฉันจึงค้นหาวิธีป้องกันการข้าม iframe ทางออนไลน์ ซึ่งก็คือการเพิ่มแอตทริบิวต์สองตัว security=restrictedsandbox= ให้กับแท็ก iframe อย่างแรกเป็นฟังก์ชันของ IE ที่ห้ามใช้ js และอย่างหลังเป็นฟังก์ชันของ HTML5
ใช้ sandbox=allow-scripts allow-same-origin allow-popups เพื่อป้องกันการข้าม อย่างไรก็ตาม...ผลลัพธ์ก็คือ:
จากนั้นฉันก็ค้นพบว่าการกระโดดนี้จริงๆ แล้วเป็นการเรียกดูหน้าการข้ามหลังจากปิดหน้าเดิม เพื่อให้คุณสามารถใช้เหตุการณ์ปิดหน้าก่อนยกเลิกการโหลดเพื่อป้องกันการกระโดด ดังนั้นให้เพิ่มโค้ดต่อไปนี้ลงในเพจ:
document.body.onbeforeunload = ฟังก์ชั่น (เหตุการณ์) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } else { window.event.returnValue = rel;แล้วฉันก็พบว่าผลลัพธ์ยังคงเป็นเช่นนี้:
สาเหตุคืออะไร? ไม่มีการตอบสนองต่อเหตุการณ์ที่เกิดขึ้น? หรือการก้าวกระโดดในเวอร์ชันเว็บ WeChat นั้นยอดเยี่ยมเกินไปหรือเปล่า? เพียงแค่เพิกเฉยต่อเหตุการณ์นี้? ดังนั้นฉันจึงสร้าง html เปล่าใหม่และเพิ่มกิจกรรมแยกต่างหากเพื่อการตรวจสอบ
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> </head> < body></body> <script>document.body.onbeforeunload = function (เหตุการณ์) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } อื่น ๆ { window.event.returnValue = rel; } };ผลลัพธ์เป็นไปได้:
แต่หลังจากฝัง iframe ลงในเพจแล้ว มันจะข้ามไปโดยตรง คุณสามารถลองใช้โค้ดต่อไปนี้
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> </head> < ร่างกาย> <iframe src=https://wx.qq.com/ frameborder=0 style=position: Absolute;border: navajowhite;left: 0;height: calc(100% - 30px);ความกว้าง:100%> </iframe> </body> <script> document.body.onbeforeunload = function (เหตุการณ์) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; อื่น { window.event.returnValue = rel; } }; </script> </html>เมื่อไม่มีไอเดียใดๆ ฉันก็เปิดและปิดอยู่เรื่อยๆ เพื่อดูว่าวิธีนี้ใช้ได้ผลหรือไม่ ทันใดนั้นฉันก็ค้นพบว่าหากเพจถูกปิดภายในระยะเวลาสั้นๆ หลังจากเปิดขึ้น เหตุการณ์ onbeforeunload จะไม่ถูกทริกเกอร์ หลังจากรอสักครู่แล้วจึงปิดเพจ กิจกรรมจะถูกทริกเกอร์และข้อความแจ้งเตือนจะปรากฏขึ้น .
มาลอง iframe มอบหมายล่าช้าให้กับ src (อ้าง JQuery ที่นี่)
<!DOCTYPE html> <html lang=en xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset=utf-8 /> <title></title> <script src=scripts /jquery-2.2.3.js></script> </head> <body> <iframe id=iframe frameborder=0 style=position: แน่นอน;เส้นขอบ: navajowhite;ซ้าย: 0;ความสูง: calc(100% - 30px);ความกว้าง:100%> </iframe> </body> <script> $(function () { setTimeout(function () { iframe.src = https: //wx.qq.com/; },5000); document.body.onbeforeunload = ฟังก์ชั่น (เหตุการณ์) { var rel = asdfawfewf; if (!window.event) { event.returnValue = rel; } อื่น ๆ { window.event.returnValue = rel;ผลลัพธ์สำเร็จแล้ว จะปรากฏขึ้นว่าจะออกจากหน้านี้หรือไม่ ไม่มีการก้าวกระโดดไปสู่ความสำเร็จ ภาพด้านล่างเป็นภาพผลิตภัณฑ์สำเร็จรูปของฉัน
เสร็จแล้ว คุณสามารถแชทและถ่ายโอนไฟล์ได้ตามปกติ แต่ไม่สามารถจับภาพหน้าจอได้
ข้อเสียคือคุณต้องคลิกปุ่มยกเลิกป๊อปอัปเพื่อเข้าสู่ระบบให้เสร็จสิ้น และจะต้องดำเนินการสองครั้ง ครั้งแรกเพื่อเปิดหน้า และครั้งที่สองหลังจากสแกนโค้ด QR หน้าจะกระโดดอีกครั้ง . ขณะนี้ยังไม่มีวิธีแก้ไขปัญหานี้ ฉันหวังว่าเพื่อน ๆ ที่มีวิธีแก้ปัญหานี้สามารถให้คำแนะนำแก่ฉันได้ ~~ บรรณาธิการจะตอบกลับคุณทันเวลา ฉันขอขอบคุณทุกท่านที่ให้การสนับสนุน เว็บไซต์ VeVb Wulin!