ฉันจะแทนที่กล่องโต้ตอบ OnBeforeUnload และแทนที่ด้วยตัวเองได้อย่างไร

ฉันต้องเตือนผู้ใช้เกี่ยวกับการเปลี่ยนแปลงที่ไม่ได้บันทึกก่อนที่พวกเขาจะออกจากหน้าเว็บ (เป็นปัญหาที่พบบ่อยมาก)

window.onbeforeunload=handler

ใช้งานได้ แต่จะเพิ่มการโต้ตอบเริ่มต้นด้วยข้อความมาตรฐานที่น่ารำคาญที่ล้อมข้อความของฉันเอง ฉันต้องการแทนที่ข้อความมาตรฐานอย่างสมบูรณ์ดังนั้นข้อความของฉันจึงชัดเจนหรือ (ดียิ่งขึ้น) แทนไดอะล็อกทั้งหมดด้วยไดอะล็อก modal โดยใช้ jQuery

จนถึงตอนนี้ฉันล้มเหลวและไม่พบใครที่ดูเหมือนจะมีคำตอบ เป็นไปได้ไหม

Javascript ในหน้าของฉัน:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

ฟังก์ชั่น closeIt ():

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

การใช้ jQuery และ jqModal ฉันลองสิ่งนี้แล้ว (ใช้กล่องโต้ตอบยืนยันที่กำหนดเอง):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

ซึ่งยังใช้งานไม่ได้ - ฉันไม่สามารถผูกไว้กับเหตุการณ์ beforeunload ได้

คุณไม่สามารถแก้ไขการสนทนาเริ่มต้นสำหรับonbeforeunloadดังนั้นทางออกที่ดีที่สุดของคุณอาจจะทำงานกับมัน

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

นี่คือการอ้างอิงถึงสิ่งนี้จาก Microsoft:

เมื่อสตริงถูกกำหนดให้กับคุณสมบัติ returnValue ของ window.event กล่องโต้ตอบปรากฏขึ้นที่ให้ผู้ใช้ตัวเลือกที่จะอยู่ในหน้าปัจจุบันและรักษาสตริงที่ได้รับมอบหมาย คำสั่งเริ่มต้นที่ปรากฏในกล่องโต้ตอบ "คุณแน่ใจหรือไม่ว่าต้องการออกจากหน้านี้ ... กดตกลงเพื่อดำเนินการต่อหรือยกเลิกเพื่ออยู่ในหน้าปัจจุบัน" ไม่สามารถลบหรือแก้ไขได้

ปัญหาน่าจะเป็น:

1. เมื่อจะเรียกว่ามันจะใช้เวลาค่าตอบแทนของผู้บริหารเป็นonbeforeunloadwindow.event.returnValue
2. มันจะแยกค่าส่งคืนเป็นสตริง (ยกเว้นว่ามันจะเป็นโมฆะ)
3. เนื่องจากfalseจะแยกเป็นสตริง, กล่องโต้ตอบจะยิงซึ่งจากนั้นจะผ่านที่เหมาะสม/truefalse

ผลลัพธ์คือดูเหมือนจะไม่มีวิธีกำหนดfalseให้onbeforeunloadเพื่อป้องกันไม่ให้มีการสนทนาเริ่มต้น

หมายเหตุเพิ่มเติมเกี่ยวกับ jQuery:

• การตั้งค่าเหตุการณ์ใน jQuery อาจเป็นปัญหาเนื่องจากช่วยให้onbeforeunloadเหตุการณ์อื่น ๆเกิดขึ้นเช่นกัน หากคุณต้องการให้เหตุการณ์การโหลดของคุณเกิดขึ้นฉันจะใช้จาวาสคริปต์ธรรมดา

• jQuery ไม่มีทางลัดonbeforeunloadดังนั้นคุณต้องใช้bindไวยากรณ์ทั่วไป

  $(window).bind('beforeunload', function() {} );

แก้ไข 09/04/2018 : ข้อความที่กำหนดเองในกล่องโต้ตอบ onbeforeunload ถูกคัดค้านตั้งแต่ chrome-51 (cf: บันทึกประจำรุ่น )

สิ่งที่ใช้ได้ผลสำหรับฉันโดยใช้jQueryและทดสอบใน IE8, Chrome และ Firefox คือ:

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

เป็นสิ่งสำคัญที่จะไม่ส่งคืนสิ่งใดหากไม่จำเป็นต้องมีพรอมต์เนื่องจากมีความแตกต่างระหว่าง IE กับพฤติกรรมของเบราว์เซอร์อื่น ๆ ที่นี่

ในขณะที่ไม่มีสิ่งใดที่คุณสามารถทำได้เกี่ยวกับกล่องในบางกรณีคุณสามารถดักคนที่คลิกที่ลิงค์ สำหรับฉันมันคุ้มค่ากับความพยายามสำหรับสถานการณ์ส่วนใหญ่และในฐานะทางเลือกฉันได้ออกจากเหตุการณ์การโหลด

ฉันใช้ Boxy แทน jQuery Dialog มาตรฐานแล้วมันมีให้ที่นี่: http://onehackoranother.com/projects/jquery/boxy/

$(':input').change(function() {
    if(!is_dirty){
        // When the user changes a field on this page, set our is_dirty flag.
        is_dirty = true;
    }
});

$('a').mousedown(function(e) {
    if(is_dirty) {
        // if the user navigates away from this page via an anchor link, 
        //    popup a new boxy confirmation.
        answer = Boxy.confirm("You have made some changes which you might want to save.");
    }
});

window.onbeforeunload = function() {
if((is_dirty)&&(!answer)){
            // call this if the box wasn't shown.
    return 'You have made some changes which you might want to save.';
    }
};

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

ฉันตัดรหัสออกดังนั้นสิ่งนี้อาจไม่ทำงานตามที่เป็นอยู่

1) ใช้ก่อนโหลดไม่โหลด

2) สิ่งสำคัญคือการหลีกเลี่ยงการดำเนินการคำสั่งส่งคืน ฉันไม่ได้หมายความว่าเพื่อหลีกเลี่ยงการกลับมาจากผู้จัดการของคุณ คุณคืนค่าถูกต้อง แต่คุณทำได้โดยทำให้แน่ใจว่าคุณถึงจุดสิ้นสุดของฟังก์ชันและไม่เรียกใช้คำสั่ง return ภายใต้เงื่อนไขเหล่านี้กล่องโต้ตอบมาตรฐานภายในจะไม่เกิดขึ้น

3) คุณสามารถถ้าคุณใช้ onbeforeunload ให้ทำการเรียก ajax ในตัวจัดการ unbeforeunload ของคุณเพื่อจัดระเบียบบนเซิร์ฟเวอร์ แต่มันจะต้องเป็นแบบซิงโครนัสและคุณต้องรอและตอบกลับในตัวจัดการ onbeforeunload ของคุณ เงื่อนไข (2) ด้านบน) ฉันทำสิ่งนี้และใช้งานได้ดี หากคุณทำการโทร ajax แบบซิงโครนัสทุกอย่างจะถูกระงับจนกว่าการตอบกลับจะกลับมา หากคุณทำแบบอะซิงโครนัสโดยคิดว่าคุณไม่สนใจคำตอบจากเซิร์ฟเวอร์การยกเลิกการโหลดหน้าจะดำเนินต่อไปและการโทร ajax ของคุณจะถูกยกเลิกโดยกระบวนการนี้รวมถึงสคริปต์ระยะไกลหากทำงานอยู่

ลองวางreturn;แทนข้อความ .. นี่ใช้งานได้กับเบราว์เซอร์ส่วนใหญ่สำหรับฉัน (นี่เป็นการป้องกันการนำเสนอของกล่องโต้ตอบเท่านั้นจริงๆ ๆ )

window.onbeforeunload = function(evt) {            
        //Your Extra Code
        return;
}

สิ่งนี้ไม่สามารถทำได้ในโครเมี่ยมเพื่อหลีกเลี่ยงการสแปมอ้างอิงจาวาสคริปต์บนก่อนที่จะโหลดไม่แสดงข้อความที่กำหนดเองสำหรับรายละเอียดเพิ่มเติม

คุณสามารถตรวจสอบว่าผู้ใช้กดปุ่มใด (ตกลงหรือยกเลิก) เนื่องจากฟังก์ชั่น onunload เรียกว่าเมื่อผู้ใช้เลือกที่จะออกจากหน้า แม้ว่าใน funcion นี้ความเป็นไปได้จะถูก จำกัด เนื่องจาก DOM กำลังถูกยุบ คุณสามารถเรียกใช้ javascript ได้ แต่ ajax POST ไม่ได้ทำอะไรดังนั้นคุณไม่สามารถใช้ methode นี้ในการออกจากระบบอัตโนมัติ แต่มีทางออกสำหรับสิ่งนั้น window.open ('logout.php') ดำเนินการใน funcion onunload ดังนั้นผู้ใช้จะออกจากระบบด้วยการเปิดหน้าต่างใหม่

function onunload = (){
    window.open('logout.php');
}

รหัสนี้เรียกว่าเมื่อผู้ใช้ออกจากหน้าหรือปิดหน้าต่างที่ใช้งานและผู้ใช้ออกจากระบบโดย 'logout.php' หน้าต่างใหม่ปิดทันทีเมื่อออกจากระบบ php ประกอบด้วยรหัส:

window.close();

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

ต่อไปนี้เป็นรหัสวิธีแก้ไขปัญหาที่ฉันพบซึ่งฉันเขียนไว้ในหน้าหลักของฉัน

function closeMe(evt) {
    if (typeof evt == 'undefined') {
        evt = window.event; }
    if (evt && evt.clientX >= (window.event.screenX - 150) &&
        evt.clientY >= -150 && evt.clientY <= 0) {
        return "Do you want to log out of your current session?";
    }
}
window.onbeforeunload = closeMe;

 <script type="text/javascript">
        window.onbeforeunload = function(evt) {
            var message = 'Are you sure you want to leave?';
            if (typeof evt == 'undefined') {
                evt = window.event;
            }       
            if (evt) {
                evt.returnValue = message;
            }
            return message;
        } 
    </script>

อ้างอิงจากhttp://www.codeprojectdownload.com

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

$(window).one("beforeunload", BeforeUnload);

วิธีการเชิงมุม 9:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

เบราว์เซอร์รองรับและลบข้อความที่กำหนดเอง:

• Chrome ลบการสนับสนุนสำหรับข้อความที่กำหนดเองใน ver 51 นาที
• Opera ถูกลบการสนับสนุนสำหรับข้อความที่กำหนดเองใน 38 นาที
• Firefox ลบการสนับสนุนสำหรับข้อความที่กำหนดเองในเวอร์ชั่น 44.0 นาที
• Safari ลบการสนับสนุนสำหรับข้อความที่กำหนดเองในเวอร์ชั่น 9.1 นาที