ตรวจหาเบราว์เซอร์หรือแท็บปิด

306

มีรหัส JavaScript / jQuery ข้ามเบราว์เซอร์ใด ๆ เพื่อตรวจสอบว่าเบราว์เซอร์หรือแท็บเบราว์เซอร์กำลังถูกปิด แต่ไม่ใช่เพราะมีการคลิกลิงค์หรือไม่

javascript jquery

— cometta
แหล่งที่มา

1

ดูคำตอบของฉันสำหรับคำถามนี้: stackoverflow.com/questions/3735198/…

— Nivas

คุณสามารถ! stackoverflow.com/questions/42706209/…

— AP

ใช้sessionStorage คุณสมบัติมันจะหมดอายุเมื่อเบราว์เซอร์ปิด w3schools.com/jsref/prop_win_sessionstorage.asp

— csandreas1

ตรวจสอบคำตอบนี้! ฉันพบว่ามันมีประโยชน์มากและครอบคลุมกรณีส่วนใหญ่ stackoverflow.com/a/26275621/7192927

— SukanyaPai

273

ถ้าฉันทำให้คุณถูกต้องคุณต้องรู้เมื่อปิดแท็บ / หน้าต่างอย่างมีประสิทธิภาพ AFAIK เป็นวิธีเดียวที่Javascriptจะตรวจจับสิ่งของประเภทนั้นonunload&onbeforeunloadเหตุการณ์ต่าง ๆ

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

— Jandy
แหล่งที่มา

39

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

— Guffa

7

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

— Jeach

1

ไม่ทำงานบน chrome / opera อีกต่อไป ... chromestatus.com/feature/5349061406228480

— Samir Seetal

2

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

— jAndy

@jAndy @Guffa ฉันจะทราบได้อย่างไรว่ามีการเปิดหน้าต่างunloadใด

— Egor Dudyak

125

จากเอกสาร Firefox

ด้วยเหตุผลบางอย่างเบราว์เซอร์ที่ใช้ Webkit จะไม่ทำตามข้อกำหนดสำหรับกล่องโต้ตอบ ตัวอย่างที่ข้ามการทำงานเกือบจะใกล้เคียงจากตัวอย่างด้านล่าง

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

ตัวอย่างนี้สำหรับการจัดการเบราว์เซอร์ทั้งหมด

— โมฮาเหม็-อิบราฮิม
แหล่งที่มา

2

นี่เป็นทางออกเดียวที่ทำงานกับเบราว์เซอร์ chrome ของฉัน ฉันไม่ได้ลองคนอื่น

— Chase Roberts

4

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

— mohamed-ibrahim

1

วิธีนี้ใช้งานไม่ได้อย่างสมบูรณ์เมื่อปิดแท็บขณะที่ใช้ firefox (> = ver. 44) เมื่อเปิดแท็บเท่านั้น

— Rajkishore

ณ วันนี้การใช้เบราว์เซอร์เวอร์ชันล่าสุดทั้งหมดจะพร้อมใช้งานเมื่อปิดแท็บนำทางไปหรือปิดเบราว์เซอร์สำหรับ Chrome, Firefox, Opera, IE11 และ Edge และจะทำงานเมื่อคุณเปิดหลายแท็บยกเว้น Chrome ที่ Chrome ปิดแท็บทั้งหมด อย่างน้อยบนเครื่องของฉัน

— ธีรี่ร์

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

— Sunil Acharya

48

ทางออกที่ง่าย

window.onbeforeunload = function () {
    return "Do you really want to close?";
};

7

คาถาอะไรแบบนี้? (y) ใช้ได้กับเบราว์เซอร์ทั้งหมดหรือไม่ ใช้งานได้ดีกับโครเมี่ยม

— Ziv Weissman

5

มันจะยิงเมื่อคุณรีเฟรชหน้า นั่นคือปัญหาเดียวของฉัน

— Leo Leoncio

6

โซลูชันนี้ไม่ได้อยู่ใน Firefox และ Chrome อีกต่อไปแล้ว

— Mehdi Dehghani

เหตุการณ์นี้ยังเกิดขึ้นในหน้าการออกจากเหตุการณ์ไม่เพียง แต่การปิดเบราว์เซอร์หรือปิดแท็บ

— Sunil Acharya

20

<body onbeforeunload="ConfirmClose()" onunload="HandleOnClose()">

var myclose = false;

function ConfirmClose()
{
    if (event.clientY < 0)
    {
        event.returnValue = 'You have closed the browser. Do you want to logout from your application?';
        setTimeout('myclose=false',10);
        myclose=true;
    }
}

function HandleOnClose()
{
    if (myclose==true) 
    {
        //the url of your logout page which invalidate session on logout 
        location.replace('/contextpath/j_spring_security_logout') ;
    }   
}

// นี่ใช้งานได้ใน IE7 หากคุณปิดแท็บหรือเบราว์เซอร์ด้วยแท็บเดียวเท่านั้น

— jyothis
แหล่งที่มา

2

ยา แต่สำหรับเบราว์เซอร์หลายแท็บเช่น ie8, firefox มีปัญหาในการใช้สิ่งนี้?

— cometta

ปรากฎว่าการใช้รหัสนี้ใน IE9 จะทำให้ข้อความนี้ปรากฏขึ้นเมื่อผู้ใช้คลิกปุ่มย้อนกลับไปข้างหน้าหรือรีเฟรชด้วยเมาส์

— Steve Wortham

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

— tjfo

ฉันฉีดwindow.onunload = "alert('wait')"และwindow.onbeforeunload = "alert('wait... chrome!')"ใช้คอนโซลใน Chromium / Ubuntu แต่ไม่ยิงเมื่อฉันปิดแท็บ

— icedwater

window.onunload = "alert('wait')"และเช่นนั้นไม่ควรใช้งานได้จริง "ฟังก์ชั่นควรกำหนดค่าสตริงให้กับคุณสมบัติ returnValue ของวัตถุเหตุการณ์และส่งคืนสตริงเดียวกัน" โปรดดูบทความ MDN

— Dmitry Vyprichenko

8

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

ขั้นแรกให้เริ่มตัวจับเวลานับถอยหลังบนเซิร์ฟเวอร์ในbeforeunloadตัวจัดการเหตุการณ์ใน JS การโทร ajax จะต้องทำให้ตรงกันสำหรับ IE และ Edge เพื่อให้ทำงานได้อย่างถูกต้อง คุณต้องใช้return;เพื่อป้องกันไม่ให้กล่องโต้ตอบการยืนยันแสดงเช่นนี้:

    window.addEventListener("beforeunload", function (e) {        
      $.ajax({
          type: "POST",
          url: startTimerUrl,
          async: false           
      });
      return;
    });

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

หมายเหตุการใช้งาน: ฉันใช้ ASP.NET MVC 5 และฉันกำลังยกเลิกการออกจากระบบในController.OnActionExecuted()วิธีการแทนที่

— Ionian316
แหล่งที่มา

มันใช้งานได้ดีมาก คุณมีเหตุผล "async: false" หรือไม่? สิ่งนี้สร้างคำเตือนว่าการโทร AJAX แบบซิงโครนัสนั้นเลิกใช้แล้ว ขอบคุณ!

— cat_in_hat

1

@FoundWaldoException ตามที่ระบุไว้ในคำตอบฉันพบว่า async ต้องถูกตั้งค่าเป็นเท็จเพื่อให้การทำงานใน IE และ Edge

— Ionian316

วิธียกเลิกการออกจากระบบOnActionExecuted?

— Kiquenet

@ Kiquenet เพียงหยุดตัวจับเวลาที่เริ่มต้นในรหัสของคุณ

— Ionian316

6

ขออภัยฉันไม่สามารถเพิ่มความคิดเห็นให้กับหนึ่งในคำตอบที่มีอยู่ แต่ในกรณีที่คุณต้องการใช้กล่องโต้ตอบคำเตือนฉันต้องการพูดถึงว่าฟังก์ชันตัวจัดการเหตุการณ์ใด ๆ มีอาร์กิวเมนต์ - เหตุการณ์ ในกรณีของคุณคุณสามารถโทร event.preventDefault () เพื่อไม่อนุญาตให้ออกจากหน้าโดยอัตโนมัติจากนั้นออกข้อความโต้ตอบของคุณเอง ฉันคิดว่านี่เป็นตัวเลือกที่ดีกว่าการใช้การแจ้งเตือนมาตรฐานที่น่าเกลียดและไม่ปลอดภัย () ฉันใช้ชุดกล่องโต้ตอบของตัวเองโดยยึดตามวัตถุ kendoWindow (Kendo UI ของ Telerik ซึ่งเกือบเต็มไปด้วยแหล่งที่มายกเว้น kendoGrid และ kendoEditor) คุณยังสามารถใช้กล่องโต้ตอบจาก jQuery UI โปรดทราบว่าสิ่งนั้นเป็นแบบอะซิงโครนัสและคุณจะต้องผูกตัวจัดการกับเหตุการณ์ onclick ของทุกปุ่ม แต่ทั้งหมดนี้ค่อนข้างง่ายที่จะใช้

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

— Alex Iurovetski
แหล่งที่มา

6

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

sessionStorageเก็บข้อมูลวัตถุเพียงหนึ่งครั้ง (ข้อมูลจะถูกลบเมื่อเบราว์เซอร์แท็บปิด). ( W3Schools )

นี่คือปากกาของฉัน

<div id="Notice">
    <span title="remove this until browser tab is closed"><u>dismiss</u>.</span>
</div>
<script>
    $("#Notice").click(function() {
     //set sessionStorage on click
        sessionStorage.setItem("dismissNotice", "Hello");
        $("#Notice").remove();
    });
    if (sessionStorage.getItem("dismissNotice"))
    //When sessionStorage is set Do stuff...
        $("#Notice").remove();
</script>

— csandreas1
แหล่งที่มา

5

ไม่มีเหตุการณ์ แต่มีคุณสมบัติwindow.closedที่ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด ณ เวลาที่เขียนนี้ ดังนั้นหากคุณต้องการรู้ว่าคุณสามารถสำรวจหน้าต่างเพื่อตรวจสอบคุณสมบัตินั้น

if(myWindow.closed){do things}

หมายเหตุ: การสำรวจความคิดเห็นโดยทั่วไปไม่ใช่วิธีที่ดีที่สุด window.onbeforeunloadเหตุการณ์ควรจะใช้ถ้าเป็นไปได้ข้อแม้เพียงอย่างเดียวว่ามันก็ยังยิงไปหากคุณออก

— dlsso
แหล่งที่มา

4

$(window).unload( function () { alert("Bye now!"); } );

— Poonam Bhatt
แหล่งที่มา

9

สิ่งนี้จะไม่ทำงานบน Firefox หรือ Chrome ลองbeforeunloadถ้าต้องการที่จะแสดงการแจ้งเตือน เช่นนี้:$(window).on('beforeunload', function(){ alert ('Bye now')});

— AdrianoRR

5

ตาม jQuery docs "เบราว์เซอร์ส่วนใหญ่จะไม่สนใจการโทรเพื่อแจ้งเตือน (), ยืนยัน () และพรอมต์ ()" api.jquery.com/unload

— katzmopolitan

4

ลองใช้:

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

— เฟซัลฮาไล
แหล่งที่มา

3

ฉันพบวิธีที่ใช้กับเบราว์เซอร์ของฉันทั้งหมด

ทดสอบกับรุ่นต่อไปนี้: Firefox 57, Internet Explorer 11, Edge 41 ซึ่งเป็นหนึ่งใน Chrome ล่าสุด (จะไม่แสดงรุ่นของฉัน)

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

  $(document).ready(function(){         

        var validNavigation = false;

        // Attach the event keypress to exclude the F5 refresh (includes normal refresh)
        $(document).bind('keypress', function(e) {
            if (e.keyCode == 116){
                validNavigation = true;
            }
        });

        // Attach the event click for all links in the page
        $("a").bind("click", function() {
            validNavigation = true;
        });

        // Attach the event submit for all forms in the page
        $("form").bind("submit", function() {
          validNavigation = true;
        });

        // Attach the event click for all inputs in the page
        $("input[type=submit]").bind("click", function() {
          validNavigation = true;
        }); 

        window.onbeforeunload = function() {                
            if (!validNavigation) {     
                // ------->  code comes here
            }
        };

  });

— Syno
แหล่งที่มา

จะมีการเพิ่มตัวจัดการแยกสำหรับเบราว์เซอร์ที่แยกกันอย่างไรฉันไม่คิดว่าเราจะมีเหตุการณ์แยกต่างหากสำหรับสิ่งนี้

— blazehub

สิ่งนี้มีประโยชน์มาก ฉันจำเป็นต้องปรับสมอ A เพื่อใช้งานเฉพาะกับไฮเปอร์ลิงก์จริงเท่านั้น มิฉะนั้นการคลิกที่แท็บ bootstrap ทำให้มันยุ่งเหยิง: $ ("a [href! = '']"). ไม่ใช่ ('[href ^ = "#"]'). ผูก ("คลิก", ฟังก์ชัน ()

— Ken Forslund

3

เนื่องจากยังไม่มีใครพูดถึง (8 ปีขึ้นไป): WebSocket สามารถเป็นอีกวิธีหนึ่งที่มีประสิทธิภาพในการตรวจสอบแท็บปิด ตราบใดที่แท็บเปิดอยู่และชี้ไปที่โฮสต์ไคลเอ็นต์จะสามารถรักษาการเชื่อมต่อ WebSocket ที่ใช้งานอยู่กับโฮสต์ได้

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

ภายในช่วงเวลาหมดเวลาที่เหมาะสม (เช่น 2 นาที) ฝั่งเซิร์ฟเวอร์สามารถกำหนดได้ว่าไคลเอ็นต์จะหายไปหลังจากที่ WebSocket ยกเลิกการเชื่อมต่อและดำเนินการสิ่งที่ต้องการเช่นลบไฟล์ชั่วคราวที่อัปโหลด (ในกรณีที่ใช้อย่างพิเศษของฉันเป้าหมายของฉันคือการยุติเซิร์ฟเวอร์แอปในพื้นที่สามวินาทีหลังจากการเชื่อมต่อ WebSocket ลดลงและกิจกรรม CGI / FastCGI ทั้งหมดสิ้นสุดลงการเชื่อมต่อแบบ keep-alive อื่น ๆ จะไม่ส่งผลกระทบต่อฉัน)

ฉันมีปัญหาในการทำให้ตัวจัดการเหตุการณ์ onunload ทำงานอย่างถูกต้องกับบีคอน (ตามคำแนะนำของคำตอบนี้ ) การปิดแท็บไม่ปรากฏขึ้นเพื่อกระตุ้นสัญญาณและเปิดแท็บที่เปิดขึ้นมาในลักษณะที่อาจทำให้เกิดปัญหา WebSocket แก้ไขปัญหาที่ฉันเรียกใช้อย่างหมดจดมากขึ้นเนื่องจากการเชื่อมต่อจะปิดลงในเวลาเดียวกับที่แท็บปิดและสลับหน้าเว็บภายในแอปพลิเคชันเพียงแค่เปิดการเชื่อมต่อ WebSocket ใหม่ภายในหน้าต่างหน่วงเวลา

— CubicleSoft
แหล่งที่มา

2

ไม่เป็นไร แต่คุณไม่สามารถแบ่งปันรหัสหรือขั้นตอนใด ๆ ในการจัดการได้หรือไม่ หากปราศจากนั่นสำหรับ noob อย่างฉันก็ไม่สามารถเข้าใจได้

— P Satish Patro

ที่จริงแล้วฉันไม่ชัดเจนในความคิดเห็นแรกของฉัน ฉันไม่รู้จักเว็บซ็อกเก็ต ดังนั้นฉันแค่อยากจะเห็นวิธีการจัดการ

— P Satish Patro

1

ลิงก์ในความคิดเห็นของฉันด้านบนไปที่ตัวอย่างโค้ด WebSocket JS ส่วน JS ลูกค้าเป็นส่วนที่ง่าย รหัสนั้นสำหรับกรณีการใช้งานเฉพาะของฉันแม้ว่าฉันจะต้องยุติแอปพลิเคชันเซิร์ฟเวอร์ทั้งหมดในเวลาที่เหมาะสม วิธีที่คุณเขียนเซิร์ฟเวอร์ WebSocket นั้นขึ้นอยู่กับคุณและต้องการการกำหนดค่าฝั่งเซิร์ฟเวอร์เพื่อเชื่อมต่อทุกอย่าง (ผู้คนจำนวนมากชอบแบ็กเอนด์ของ NodeJS w / Nginx frontend) การเขียนเซิร์ฟเวอร์ที่เปิดใช้งาน TCP / IP เป็นหัวข้อที่ซับซ้อนไม่เหมาะสำหรับการอภิปรายในความคิดเห็นและมันเกินความจริงในการตั้งค่าเพียงหนึ่งสำหรับการตรวจสอบปัญหาเฉพาะนี้

— CubicleSoft

2

//Detect Browser or Tab Close Events
$(window).on('beforeunload',function(e) {
  e = e || window.event;
  var localStorageTime = localStorage.getItem('storagetime')
  if(localStorageTime!=null && localStorageTime!=undefined){
    var currentTime = new Date().getTime(),
        timeDifference = currentTime - localStorageTime;

    if(timeDifference<25){//Browser Closed
       localStorage.removeItem('storagetime');
    }else{//Browser Tab Closed
       localStorage.setItem('storagetime',new Date().getTime());
    }

  }else{
    localStorage.setItem('storagetime',new Date().getTime());
  }
});

ลิงก์ JSFiddle

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

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

ฉันทดสอบบน Chrome Browser เวอร์ชัน 76.0.3809.132 และพบว่าใช้งานได้

:) โหวตถ้าคุณคิดว่าคำตอบของฉันมีประโยชน์ ....

— ramojuraju
แหล่งที่มา

นี่ทำให้ฉันมีความคิด ฉันกำลังตั้งค่าการประทับเวลาบวก 10 วินาทีใน localStorage หลังจากเข้าสู่ระบบและในเหตุการณ์ก่อนที่จะยกเลิกการโหลด ในการโหลดฉันตรวจสอบว่าเวลาผ่านไปแล้วเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ ขอบคุณ :)

— G4BB3R

1

window.onbeforeunload = function() {
  console.log('event');
  return false; //here also can be string, that will be shown to the user
}

— IvanM
แหล่งที่มา

2

here also can be string, that will be shown to the userมันไม่ได้เกี่ยวกับ Firefox มันจะอยู่ในโครเมี่ยม แต่ ...

— TrySpace

ค่าส่งคืน (สตริง) ใด ๆ จะแสดงเฉพาะใน MSIE <= 11 ดังนั้นโดยทั่วไปจะไม่มีประโยชน์สำหรับเบราว์เซอร์อื่นทั้งหมด

— OSWorX

1

เป็นไปได้ที่จะตรวจสอบด้วยความช่วยเหลือของ window.closed ในตัวจัดการเหตุการณ์ในเหตุการณ์ 'unload' เช่นนี้ แต่จำเป็นต้องใช้การหมดเวลา (ดังนั้นผลลัพธ์ไม่สามารถรับประกันได้หาก smth ล่าช้าหรือป้องกันหน้าต่างปิด):

ตัวอย่างของ JSFiddle (ทดสอบเมื่อ lates Safari, FF, Chrome, Edge และ IE11)

var win = window.open('', '', 'width=200,height=50,left=200,top=50');
win.document.write(`<html>
   <head><title>CHILD WINDOW/TAB</title></head>
   <body><h2>CHILD WINDOW/TAB</h2></body>
</html>`);
win.addEventListener('load',() => {
    document.querySelector('.status').innerHTML += '<p>Child was loaded!</p>';
});
win.addEventListener('unload',() => {
    document.querySelector('.status').innerHTML += '<p>Child was unloaded!</p>';
    setTimeout(()=>{
        document.querySelector('.status').innerHTML +=  getChildWindowStatus();
    },1000);
});
win.document.close()
document.querySelector('.check-child-window').onclick = ()=> {
    alert(getChildWindowStatus());
}
function getChildWindowStatus() {
  if (win.closed) { 
      return 'Child window has been closed!';
  } else {
      return 'Child window has not been closed!';
  }
}

— Rvach.Flyver
แหล่งที่มา

1

ฉันได้ลองใช้วิธีแก้ปัญหาข้างต้นทั้งหมดแล้วมันไม่ได้ผลเลยสำหรับฉันเป็นพิเศษเพราะมีส่วนประกอบ Telerik ในโครงการของฉันที่มีปุ่ม 'ปิด' สำหรับหน้าต่างป๊อปอัปและเรียกว่าเหตุการณ์ 'ก่อนโหลด' นอกจากนี้ตัวเลือกปุ่มทำงานไม่ถูกต้องเมื่อคุณมีกริด Telerik ในหน้าของคุณ (ฉันหมายถึงปุ่มที่อยู่ภายในกริด) ดังนั้นฉันจึงไม่สามารถใช้คำแนะนำใด ๆ ข้างต้นได้ ในที่สุดนี่คือทางออกสำหรับฉัน ฉันได้เพิ่มเหตุการณ์ onUnload บนแท็ก body ของ _Layout.cshtml บางสิ่งเช่นนี้

<body onUnload="LogOff()">

แล้วเพิ่มฟังก์ชัน LogOff เพื่อเปลี่ยนเส้นทางไปยังบัญชี / LogOff ซึ่งเป็นวิธีการในตัวใน Asp.Net MVC ตอนนี้เมื่อฉันปิดเบราว์เซอร์หรือแท็บก็เปลี่ยนเส้นทางไปยังวิธี LogOff และผู้ใช้จะต้องเข้าสู่ระบบเมื่อกลับมา ฉันได้ทำการทดสอบแล้วทั้งใน Chrome และ Firefox และมันใช้งานได้!

  function LogOff() {
        $.ajax({
            url: "/Account/LogOff",
            success: function (result) {

                                        }
               });
       }

— Amir978
แหล่งที่มา

0

window.onbeforeunload = function ()
{       

    if (isProcess > 0) 
    {
        return true;       
    }   

    else
    { 
        //do something      
    }
};

ฟังก์ชั่นนี้แสดงกล่องโต้ตอบการยืนยันถ้าคุณปิดหน้าต่างหรือรีเฟรชหน้าในระหว่างกระบวนการใด ๆ ในเบราว์เซอร์ฟังก์ชั่นนี้ทำงานในทุกเบราว์เซอร์คุณต้องตั้งค่า isProcess var ในกระบวนการ ajax ของคุณ

— ฮาริ
แหล่งที่มา

ตัวอย่างเต็มสำหรับชุด isProcess?

— Kiquenet

0

window.addEventListener("beforeunload", function (e) {
 var confirmationMessage = "tab close";

 (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
 sendkeylog(confirmationMessage);
 return confirmationMessage;                                //Webkit, Safari, Chrome etc.
});

— user3098847
แหล่งที่มา

ที่จริงฉันต้องการแสดงข้อความยืนยันหากผู้ใช้ปิดแท็บแล้วเท่านั้น มันใช้งานได้สำหรับฉัน แต่ฉันกำลังประสบปัญหาว่าถ้าฉันคลิกที่ลิงค์ใด ๆ ของหน้าเดียวกันแล้วยังแสดงข้อความยืนยันสำหรับ moe อ้างอิง: w3schools.com/code/tryit.asp?filename=FEK2KWUN9R8Z @Tunaki

— โมฮัมเหม็ด

1

คือsendkeylogอะไร

— Kiquenet

0

ตามที่ @ jAndy พูดถึงไม่มีรหัสจาวาสคริปต์ที่ถูกต้องในการตรวจสอบหน้าต่างที่ถูกปิด ฉันเริ่มจากสิ่งที่ @Syno เสนอมา

ฉันผ่านไปแล้วแม้ว่าสถานการณ์แบบนั้นและให้คุณทำตามขั้นตอนเหล่านี้คุณจะสามารถตรวจจับได้
ฉันทดสอบบน Chrome 67+ และ Firefox 61+

var wrapper = function () { //ignore this

var closing_window = false;
$(window).on('focus', function () {
    closing_window = false; 
   //if the user interacts with the window, then the window is not being 
   //closed
});

$(window).on('blur', function () {

    closing_window = true;
    if (!document.hidden) { //when the window is being minimized
        closing_window = false;
    }
    $(window).on('resize', function (e) { //when the window is being maximized
        closing_window = false;
    });
    $(window).off('resize'); //avoid multiple listening
});

$('html').on('mouseleave', function () {
    closing_window = true; 
    //if the user is leaving html, we have more reasons to believe that he's 
    //leaving or thinking about closing the window
});

$('html').on('mouseenter', function () {
    closing_window = false; 
    //if the user's mouse its on the page, it means you don't need to logout 
    //them, didn't it?
});

$(document).on('keydown', function (e) {

    if (e.keyCode == 91 || e.keyCode == 18) {
        closing_window = false; //shortcuts for ALT+TAB and Window key
    }

    if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) {
        closing_window = false; //shortcuts for F5 and CTRL+F5 and CTRL+R
    }
});

// Prevent logout when clicking in a hiperlink
$(document).on("click", "a", function () {
    closing_window = false;
});

// Prevent logout when clicking in a button (if these buttons rediret to some page)
$(document).on("click", "button", function () {
    closing_window = false;

});
// Prevent logout when submiting
$(document).on("submit", "form", function () {
    closing_window = false;
});
// Prevent logout when submiting
$(document).on("click", "input[type=submit]", function () {
    closing_window = false;
});

var toDoWhenClosing = function() {

    //write a code here likes a user logout, example: 
    //$.ajax({
    //    url: '/MyController/MyLogOutAction',
    //    async: false,
    //    data: {

    //    },
    //    error: function () {
    //    },
    //    success: function (data) {
    //    },
    //});
};


window.onbeforeunload = function () {
    if (closing_window) {
        toDoWhenClosing();
    }
};

};

— Bruno Henrique
แหล่งที่มา

1

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

— Kyle

ฉันใส่ $ (หน้าต่าง) .off ('ปรับขนาด') นี่จะเพียงพอหรือไม่

— Bruno Henrique

ในทางเทคนิคแล้วมันจะลบเครื่องมือจัดการอื่น ๆ ที่เพิ่มไว้ที่อื่นผ่าน jQuery ด้วย

— Kyle

-2

ลองสิ่งนี้ฉันมั่นใจว่าจะใช้งานได้กับคุณ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {

        try{
            opera.setOverrideHistoryNavigationMode('compatible');
            history.navigationMode = 'compatible';
        }catch(e){}

        function ReturnMessage()
        {
            return "wait";
        }

        function UnBindWindow()
        {
            $(window).unbind('beforeunload', ReturnMessage);
        }

        $(window).bind('beforeunload',ReturnMessage );
    });
</script>

— Tejash Raval Prajapati
แหล่งที่มา

-3

ลองสิ่งนี้ มันจะทำงาน. วิธีการยกเลิกการโหลด jquery ถูกยกเลิก

window.onbeforeunload = function(event) {
    event.returnValue = "Write something clever here..";
};

— Arda Ç
แหล่งที่มา