JavaScript ก่อนออกจากหน้า

233

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

<script type="text/javascript">
function con() {
    var answer = confirm("do you want to check our other products")
    if (answer){

        alert("bye");
    }
    else{
        window.location = "http://www.example.com";
    }
}
</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

แต่มันยืนยันหลังจากปิดหน้าไปแล้ว? ทำอย่างไรให้ถูกต้อง?

มันจะดียิ่งขึ้นถ้ามีคนแสดงให้เห็นว่าทำอย่างไรกับ jQuery

javascript jquery

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

1

ฮ่าฮ่าฮ่า ... ใช่แล้วมันค่อนข้างถูกต้อง ... แต่โชคดีที่ไม่ใช่เว็บไซต์ของฉัน ... ลูกค้าของฉันขอให้ทำสิ่งนี้บนฝั่งของเขา

— kd7

25

ใช่ แต่ฉันดีใจที่เห็นการแจ้งเตือนเหล่านั้นเมื่อฉันกำลังจะออกจากหน้า Gmail ที่ไม่ได้บันทึก

— Etdashou

หมายเหตุบน Firefox 4+ จะมีเพียงข้อความเริ่มต้นเท่านั้นที่จะแสดงแทนข้อความที่คุณกำหนดเองdeveloper.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes

— baptx

4

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

— Wasim A.

352

onunload(หรือonbeforeunload) ไม่สามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าอื่น นี่คือเหตุผลด้านความปลอดภัย

หากคุณต้องการแสดงพรอมต์ก่อนที่ผู้ใช้จะออกจากหน้าใช้onbeforeunload:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

หรือกับ jQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

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

คุณสามารถใช้onunloadทำสิ่งต่าง ๆ ก่อนที่หน้าจะไม่โหลด แต่คุณไม่สามารถเปลี่ยนเส้นทางจากที่นั่น (Chrome 14+ บล็อกการแจ้งเตือนภายในonunload):

window.onunload = function() {
    alert('Bye.');
}

หรือกับ jQuery:

$(window).unload(function(){
  alert('Bye.');
});

— จรวดอันตราย
แหล่งที่มา

12

@Joseph: เมื่อคุณส่งคืนสตริงonbeforeunloadเบราว์เซอร์จะใส่สตริงนั้นลงในกล่องยืนยันของตัวเอง การใช้confirmไม่มีประโยชน์onunloadและonbeforeunloadเนื่องจากมีเพียงเบราว์เซอร์เท่านั้นที่สามารถควบคุมได้ว่าจะไปที่ไหนไม่ใช่คุณ ลองชมตัวอย่างนี้: jsfiddle.net/3kvAC

— Rocket Hazmat

7

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

— Dan Fitch

5

@Adam: Firefox ตัดสินใจที่จะไม่อนุญาตให้ปรับแต่งข้อความนั้น นั่นเป็นส่วนหนึ่งของเบราว์เซอร์ดังนั้นคุณจึงไม่สามารถแทนที่พฤติกรรมนั้นได้ เบราว์เซอร์อื่นอาจลบความสามารถในการปรับแต่งข้อความ ดู: developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/

— ......

8

@RocketHazmat Chrome ก็มีเช่นกัน ตอนนี้มีเพียงพูดว่า: คุณต้องการออกจากเว็บไซต์นี้หรือไม่? การเปลี่ยนแปลงที่คุณทำอาจไม่ถูกบันทึก

— programmer5000

6

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

— Naman

34

รหัสนี้เมื่อคุณตรวจพบการเปลี่ยนแปลงสถานะของแบบฟอร์มด้วยหรือไม่

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e){
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
});

คุณสามารถใช้ฟังก์ชั่นการทำให้เป็นแบบอนุกรมของ Google JQuery สิ่งนี้จะรวบรวมอินพุตแบบฟอร์มทั้งหมดและบันทึกลงในอาร์เรย์ ฉันคิดว่าคำอธิบายนี้เพียงพอแล้ว :)

— Wasim A.
แหล่งที่มา

ความคิดใด ๆ ว่าทำไมสิ่งนี้ถึงใช้งานไม่ได้ มันสามารถเขียนทับโดยฟังก์ชั่น js อื่น ๆ / ปลั๊กอิน jquery? ฉันใช้แอพ webrtc และฉันต้องการ "ปิด" บางสิ่งเมื่อไคลเอนต์ปิดหน้าต่างดังนั้นจึงจำเป็นต้องจัดการกับการปิดหน้าต่าง

— เฮ้

1

ปลั๊กอินนี้สามารถเขียนทับได้โดยปลั๊กอินอื่น ๆ ซึ่งนักพัฒนาส่วนใหญ่ทำผิดกับตัวเลือกหากคุณสงสัยเกี่ยวกับการเขียนทับให้ใส่รหัส jquery ของคุณก่อนปิดแท็ก </body>

— Wasim A.

ใช่ ... ถ้าคุณมีรหัส JS บางอย่างที่ซ่อนหรือปิดใช้งานช่องป้อนข้อมูลหลังจากที่โหลดหน้าเว็บแล้วเมื่อคุณทำการตรวจสอบเพื่อเปรียบเทียบฟิลด์ \ ที่ซ่อนอยู่จะไม่ถูกทำให้เป็นอนุกรม การตรวจสอบจะล้มเหลวแน่นอน ;) มีวิธีแก้ปัญหานี้: stackoverflow.com/a/4748748/114029

— Leniel Maccaferri

โดยวิธี ... มีวิธีที่ดีกว่าที่นี่: stackoverflow.com/q/16322042/114029

— Leniel Maccaferri

1

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

— อดัม

19

วิธีนี้จะแจ้งเตือนเมื่อออกจากหน้าปัจจุบัน

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

— อจิตซิงห์
แหล่งที่มา

14

นี่คือสิ่งที่ฉันทำเพื่อแสดงข้อความยืนยันเมื่อฉันมีข้อมูลที่ไม่ได้บันทึก

window.onbeforeunload = function () {
            if (isDirty) {
                return "There are unsaved data.";
            }
            return undefined;
        }

กลับมา "ไม่ได้กำหนด" จะปิดการใช้งานการยืนยัน

หมายเหตุ: การคืนค่า "null" จะไม่ทำงานกับ IE

นอกจากนี้คุณสามารถใช้ "ไม่ได้กำหนด" เพื่อปิดการใช้งานการยืนยัน

window.onbeforeunload = undefined;

— มีนามัทตะ
แหล่งที่มา

11

เพื่อให้มี popop กับ Chrome 14+ คุณต้องทำสิ่งต่อไปนี้:

jQuery(window).bind('beforeunload', function(){
    return 'my text';
});

ผู้ใช้จะถูกถามว่าเขาต้องการที่จะอยู่หรือออกจาก

— David Bélanger
แหล่งที่มา

มีความคิดว่าทำไมสิ่งนี้ถึงใช้งานไม่ได้? ฉันกำลังใช้ chrome (เวอร์ชันล่าสุด) พร้อมกับปลั๊กอิน jquery จำนวนมาก แต่ฉันไม่ได้รับการแจ้งเตือนใด ๆ เมื่อฉันปิดหน้าต่าง

— เฮ้

@hey ทำไมการลงคะแนน? มันใช้งานได้ ... คุณต้องตรวจสอบให้แน่ใจว่าอยู่นอกjQuery(document)และฉันขอแนะนำให้วางไว้หลังจากที่โหลดปลั๊กอินทั้งหมดแล้ว นอกจากนี้ยังมีโค้ดนี้ไม่ได้ทำการแจ้งเตือนใด ๆ ... returnมันเป็นเพียงการสาธิตด้วย

— David Bélanger

7

คุณสามารถใช้หนึ่งซับต่อไปนี้เพื่อถามผู้ใช้เสมอก่อนออกจากหน้า

window.onbeforeunload = s => "";

หากต้องการถามผู้ใช้ว่ามีการแก้ไขบางสิ่งในหน้าเว็บให้ดูคำตอบนี้

— spencer.sm
แหล่งที่มา

สิ่งนี้จะทำงานเช่นกันหากฉันรีเฟรชหน้าเว็บหรือเพิ่งออกจาก

— Si8

ใช่มันจะทำการรีเฟรชหรือออก

— spencer.sm

อย่างไรก็ตามมีการรู้เมื่อมันรีเฟรช vs เมื่อครั้งแรกหรือไม่

— Si8

เมื่อผู้ใช้มาที่หน้าเว็บเป็นครั้งแรกตรงข้ามกับที่ผู้ใช้รีเฟรชหน้า

— Si8

ไม่นะ. มันจะไม่ถูกไล่ออกเมื่อผู้ใช้มาที่หน้านี้เป็นครั้งแรก เมื่อปิดหรือเปลี่ยนหน้าเว็บหรือรีเฟรช

— spencer.sm

4

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

ใช้วิธีการนี้เพื่อแสดงข้อความเฉพาะเมื่อผู้ใช้มีการเปลี่ยนแปลงบางอย่าง

var form = $('#your-form'),
  original = form.serialize()

form.submit(function(){
  window.onbeforeunload = null
})

window.onbeforeunload = function(){
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'
}

— Simon Franzen
แหล่งที่มา

3

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() {
    return "Write something clever here...";
}
</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

— Emir Mamashov
แหล่งที่มา

1

มีประโยชน์เพิ่มขึ้นเล็กน้อยเปิดใช้งานและปิดใช้งาน

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

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

1

วิธีแก้ปัญหาส่วนใหญ่ที่นี่ไม่ได้ผลสำหรับฉันดังนั้นฉันจึงใช้วิธีแก้ปัญหาที่พบที่นี่

ฉันยังเพิ่มตัวแปรเพื่ออนุญาตให้กล่องยืนยันหรือไม่

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => {
    if (!hideWarning) {
        event.preventDefault();
        event.returnValue = '';
    }

});

— ราชาชาร์
แหล่งที่มา