কীভাবে "আপনি নিশ্চিত যে আপনি এই পৃষ্ঠাটি থেকে সরে যেতে চান?" পরিবর্তনগুলি প্রতিশ্রুতিবদ্ধ যখন?

267

এখানে স্ট্যাকওভারফ্লোতে, আপনি যদি পরিবর্তনগুলি শুরু করে থাকেন তবে আপনি পৃষ্ঠাটি থেকে দূরে নেভিগেশন নেওয়ার চেষ্টা করেছেন, একটি জাভাস্ক্রিপ্ট কনফার্ম বোতামটি দেখায় এবং জিজ্ঞাসা করছে: "আপনি কি নিশ্চিত যে আপনি এই পৃষ্ঠা থেকে দূরে নেভিগেট করতে চান?" ব্লি ব্লা ব্লো ...

এর আগে কি কেউ এটি প্রয়োগ করেছে, আমি কীভাবে ট্র্যাক করব যে পরিবর্তনগুলি প্রতিশ্রুতিবদ্ধ হয়েছিল? আমি বিশ্বাস করি যে আমি নিজেই এটি করতে পারি, আমি আপনার কাছ থেকে বিশেষজ্ঞদের কাছ থেকে ভাল অনুশীলনগুলি শেখার চেষ্টা করছি।

আমি নিম্নলিখিত চেষ্টা করেছিলাম কিন্তু এখনও কাজ করে না:

<html>
<body>
    <p>Close the page to trigger the onunload event.</p>
    <script type="text/javascript">
        var changes = false;        
        window.onbeforeunload = function() {
            if (changes)
            {
                var message = "Are you sure you want to navigate away from this page?\n\nYou have started writing or editing a post.\n\nPress OK to continue or Cancel to stay on the current page.";
                if (confirm(message)) return true;
                else return false;
            }
        }
    </script>

    <input type='text' onchange='changes=true;'> </input>
</body>
</html>

কেউ কি উদাহরণ পোস্ট করতে পারেন?

javascript  html  message  onbeforeunload  confirm 
— শিমি ওয়েটজ্যান্ডলার
সূত্র
3
আপনার উদাহরণ তৈরির জন্য ফাংশনটি এতে পরিবর্তন করুন: myFunction () {window.onbeforeunload = "message"; } তারপরে ইনপুটটি পরিবর্তন করুন: <ইনপুট টাইপ = 'পাঠ্য' ওচেন্জ = 'মাই ফাংশন ();'> </ ইনপুট>
— কিথ
সম্পর্কিত: stackoverflow.com/q/821011/435605
— AlikElzin-kilaka

উত্তর:

367

আপডেট (2017)

আধুনিক ব্রাউজারগুলি এখন একটি কাস্টম বার্তা প্রদর্শন করাটিকে সুরক্ষার ঝুঁকি হিসাবে বিবেচনা করে এবং তাই সেগুলি সমস্ত থেকে সরিয়ে দেওয়া হয়েছে । ব্রাউজারগুলি এখন কেবল জেনেরিক বার্তা প্রদর্শন করে। যেহেতু আমাদের আর বার্তাটি সেট করার বিষয়ে চিন্তা করতে হবে না, এটি এতটাই সহজ:

// Enable navigation prompt
window.onbeforeunload = function() {
    return true;
};
// Remove navigation prompt
window.onbeforeunload = null;

উত্তরাধিকারী ব্রাউজার সমর্থনের জন্য নীচে পড়ুন।

আপডেট (2013)

অরজিনাল উত্তর আইআই and-৮ এবং এফএক্স ১-৩.৫ (যা এটি আমরা যখন ২০০৯ সালে লেখা হয়েছিল তখন টার্গেট করেছিলাম) এর জন্য উপযুক্ত, তবে এটি এখন সেকেলে হয়ে গেছে এবং বেশিরভাগ বর্তমান ব্রাউজারগুলিতে কাজ করবে না - আমি রেখে গেছি রেফারেন্সের জন্য এটি নীচে।

window.onbeforeunloadসমস্ত ব্রাউজার দ্বারা ধারাবাহিকভাবে চিকিত্সা করা হয় না। এটি কোনও ফাংশন রেফারেন্স হওয়া উচিত এবং স্ট্রিং নয় (মূল উত্তর হিসাবে বলা হয়েছে) তবে এটি পুরানো ব্রাউজারগুলিতে কাজ করবে কারণ তাদের বেশিরভাগের চেকটি মনে হয় কিছু বরাদ্দ করা হয়েছে কিনা onbeforeunload(প্রত্যাবর্তনকারী ফাংশন সহ null) be

আপনি window.onbeforeunloadকোনও ফাংশন রেফারেন্সে সেট করেছেন তবে পুরানো ব্রাউজারগুলিতে আপনাকে returnValueকেবল স্ট্রিং ফেরার পরিবর্তে ইভেন্টটির সেট করতে হবে:

var confirmOnPageExit = function (e) 
{
    // If we haven't been passed the event get the window.event
    e = e || window.event;

    var message = 'Any text will block the navigation and display a prompt';

    // For IE6-8 and Firefox prior to version 4
    if (e) 
    {
        e.returnValue = message;
    }

    // For Chrome, Safari, IE8+ and Opera 12+
    return message;
};

confirmOnPageExitযদি আপনি চান না যে ব্যবহারকারী বার্তাটি ছাড়াই চালিয়ে যেতে চান তবে আপনার চেকটি করতে হবে এবং নাল ফিরে আসতে পারে না । ইভেন্টটি নির্ভরযোগ্যভাবে চালু এবং বন্ধ করতে আপনার এখনও অপসারণ করতে হবে:

// Turn it on - assign the function that returns the string
window.onbeforeunload = confirmOnPageExit;

// Turn it off - remove the function entirely
window.onbeforeunload = null;

আসল উত্তর (২০০৯ এ কাজ করা)

এটি চালু করতে:

window.onbeforeunload = "Are you sure you want to leave?";

এটি বন্ধ করতে:

window.onbeforeunload = null;

মনে রাখবেন যে এটি কোনও সাধারণ ঘটনা নয় - আপনি এটি স্ট্যান্ডার্ড উপায়ে আবদ্ধ করতে পারবেন না।

মান পরীক্ষা করতে? এটি আপনার বৈধতা কাঠামোর উপর নির্ভর করে।

JQuery এ এটির মতো কিছু হতে পারে (খুব প্রাথমিক উদাহরণ):

$('input').change(function() {
    if( $(this).val() != "" )
        window.onbeforeunload = "Are you sure you want to leave?";
});
— কিথ
সূত্র
4
এটি এমন কিছু হবে: $ ('ইনপুট: পাঠ্য') change ;});
— কিথ
1
একটি সাধারণ চেকের জন্য, বা আপনি প্রতিটি পরিবর্তনের আরও জটিল বৈধতা যুক্ত করতে পারেন
— কিথ
1
এটি লক্ষ্য করার মতো বিষয় যে 'রিটার্নভ্যালু' পদ্ধতিটি স্ট্যান্ডার্ডে নির্দিষ্ট করা একমাত্র পদ্ধতি, সুতরাং এটি কেবল আই 6-8 এর জন্য নয়, এটি সমস্ত মান-সম্মতিযুক্ত ব্রাউজারগুলির জন্য (এই ক্ষেত্রে ক্রোম, সাফারি এবং অপেরা অন্তর্ভুক্ত নয়)।
— rmcclellan
3
ফর্ম জমা দেওয়ার বিষয়ে সতর্কতা বন্ধ করতে, আমি ব্যবহার করেছি $("#submit_button").click(function() { window.onbeforeunload = null; });। আমি মূলত বোতামটির অন্লিক ইভেন্টটি ব্যবহার করেছি, তবে তত সুন্দর হওয়ার পাশাপাশি এটি আই 8 এর সাথেও কাজ করে নি।
— অ্যান্ডি বেভারলি
1
@ অ্যালিকেলজিন-কিলাকা আপনি পারবেন না। আপনি যদি পপ-আপ পাঠ্য পরিবর্তন করতে চান তবে আপনাকে নিজের কাস্টম পপআপ তৈরি করতে হবে, তবে এটি window.onbeforeunloadইভেন্টটিকে অবরুদ্ধ করতে পারে না ।
— কিথ
38

onbeforeunloadমাইক্রোসফট আইএসএস সর্বনিকটবর্তী বস্তু আমরা একটি প্রমিত সমাধান করতে হবে, কিন্তু জেনে রাখুন যে ব্রাউজার সমর্থনের অমসৃণ হতে হয়; উদাহরণস্বরূপ অপেরার জন্য এটি কেবল 12 এবং পরবর্তী সংস্করণে কাজ করে (এখনও এই লেখায় বিটাতে রয়েছে)।

এছাড়াও, সর্বাধিক সামঞ্জস্যের জন্য , আপনাকে স্ট্রিংটি ফিরিয়ে দেওয়ার চেয়ে আরও বেশি কিছু করতে হবে, যেমনটি মোজিলা বিকাশকারী নেটওয়ার্কে ।

উদাহরণ: নেভিগেশন প্রম্পট সক্ষম / অক্ষম করার জন্য নিম্নলিখিত দুটি ফাংশন সংজ্ঞা দিন (সিএফ। এমডিএন উদাহরণ):

function enableBeforeUnload() {
    window.onbeforeunload = function (e) {
        return "Discard changes?";
    };
}
function disableBeforeUnload() {
    window.onbeforeunload = null;
}

তারপরে একটি ফর্মটি সংজ্ঞায়িত করুন:

<form method="POST" action="" onsubmit="disableBeforeUnload();">
    <textarea name="text"
              onchange="enableBeforeUnload();"
              onkeyup="enableBeforeUnload();">
    </textarea>
    <button type="submit">Save</button>
</form>

এইভাবে, ব্যবহারকারীর কেবলমাত্র পাঠ্য অঞ্চলটি পরিবর্তন করা হলে সেখান থেকে নেভিগেট করার বিষয়ে সতর্ক করা হবে এবং প্রকৃতপক্ষে ফর্মটি জমা দেওয়ার সময় তাকে অনুরোধ করা হবে না।

— সেরেন লভবর্গ
সূত্র
1
: Mozill এর সাইটের উপর ভিত্তি করে, সাম্প্রতিকতম ডেস্কটপ ব্রাউজারে এখন এটা সমর্থন developer.mozilla.org/en/DOM/window.onbeforeunload
— Hengjie
মাইক্রোসফ্ট-ইসম একটি দুর্দান্ত শব্দ।
— লুক টেইলর
18

JQuery এর সাথে এই জিনিসগুলি করা বেশ সহজ is যেহেতু আপনি সেট বাঁধাই করতে পারেন।

এটি পুনরায় আনলোড করার জন্য যথেষ্ট নয়, আপনি যদি কেউ স্টাফ সম্পাদনা শুরু করেন তবে আপনি কেবল নেভিগেটটি ট্রিগার করতে চান।

— স্যাম জাফরান
সূত্র
2
@ জন্সস্টজহনের ব্লগ পোস্টগুলিতে আঘাত হানা যাচ্ছে না। হয়তো সে একজন পাল হয়ে আমাদের সঠিক দিকে নির্দেশ করবে? : D
— FLGMwt
14
=> 500 অভ্যন্তরীণ ত্রুটি। এজন্য লিঙ্কগুলি এসও-তে অবমূল্যায়ন করা হয়। স্থির হওয়া পর্যন্ত ডাউনভোটেড।
— Loïc
এই ওয়েবপৃষ্ঠাটি উপলভ্য নয়
— ম্যাটিউজ
2
যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে।
— bwest
2
জন সেন্ট জন থেকে মূল লিংক ভেঙ্গে গেল, তাই আমি এটা আপডেট করা Wayback মেশিন এটি সংস্করণ। লিঙ্কটির বিষয়বস্তু অন্য অনেক সাইটে অনুলিপিযুক্ত পাওয়া যাবে তবে আমার ধারণা স্যাম
— আলভারো মন্টোরো
14

jquerys 'পূর্বেই' আমার জন্য দুর্দান্ত কাজ করেছে

$(window).bind('beforeunload', function(){
    if( $('input').val() !== '' ){
        return "It looks like you have input you haven't submitted."
    }
});
— ডিভন পেটিকোলাস
সূত্র
বাইন্ডকে অবমূল্যায়ন করা হয়েছে এবং এর অনুরূপ কোডের একটি নতুন সংস্করণটি এই উত্তরে দেখা যাবে: stackoverflow.com/a/1889450/908677
— লোফগ্রেন
11

কোনও তথ্য ফর্মটিতে ইনপুট থাকলে ম্যাসেজটি উপস্থাপনের এই সহজ উপায় এবং ফর্মটি জমা দেওয়া থাকলে বার্তাটি প্রদর্শন না করা:

$(function () {
    $("input, textarea, select").on("input change", function() {
        window.onbeforeunload = window.onbeforeunload || function (e) {
            return "You have unsaved changes.  Do you want to leave this page and lose your changes?";
        };
    });
    $("form").on("submit", function() {
        window.onbeforeunload = null;
    });
})
— কার্ল জি
সূত্র
8

কীথের ইতিমধ্যে আশ্চর্যজনক উত্তরটি প্রসারিত করতে :

কাস্টম সতর্কতা বার্তা

কাস্টম সতর্কতা বার্তাগুলি অনুমোদনের জন্য, আপনি এটির মতো কোনও কার্যে এটি মোড়ানো করতে পারেন:

function preventNavigation(message) {
    var confirmOnPageExit = function (e) {
        // If we haven't been passed the event get the window.event
        e = e || window.event;

        // For IE6-8 and Firefox prior to version 4
        if (e)
        {
            e.returnValue = message;
        }

        // For Chrome, Safari, IE8+ and Opera 12+
        return message;
    };
    window.onbeforeunload = confirmOnPageExit;
}

তারপরে আপনার কাস্টম বার্তার সাহায্যে সেই ফাংশনটি কল করুন:

preventNavigation("Baby, please don't go!!!");

আবার নেভিগেশন সক্ষম করা হচ্ছে

ন্যাভিগেশন পুনরায় সক্ষম করতে, আপনাকে যা করতে হবে তা সেট করা window.onbeforeunloadআছে null। এটি এখানে, একটি ঝরঝরে সামান্য ফাংশন মোড়ানো যা যে কোনও জায়গায় বলা যেতে পারে:

function enableNavigation() {
    window.onbeforeunload = null;
}

উপাদানগুলি গঠনে এটিকে বাঁধতে jQuery ব্যবহার করে

JQuery ব্যবহার করা থাকলে এটি সহজেই এই জাতীয় ফর্মের সমস্ত উপাদানের সাথে আবদ্ধ হতে পারে:

$("#yourForm :input").change(function() {
    preventNavigation("You have not saved the form. Any \
        changes will be lost if you leave this page.");
});

তারপরে ফর্মটি জমা দেওয়ার অনুমতি দেওয়ার জন্য:

$("#yourForm").on("submit", function(event) {
    enableNavigation();
});

গতিশীল-সংশোধিত ফর্মগুলি:

preventNavigation() এবং enableNavigation() প্রয়োজন মতো অন্যান্য যে কোনও কার্যক্রমে আবদ্ধ হতে পারে যেমন গতিশীলভাবে কোনও ফর্ম পরিবর্তন করে বা AJAX অনুরোধ প্রেরণকারী একটি বোতামে ক্লিক করা। আমি ফর্মটিতে একটি লুকানো ইনপুট উপাদান যুক্ত করে এটি করেছি:

<input id="dummy_input" type="hidden" />

তারপরে যে কোনও সময় আমি ব্যবহারকারীকে চলাচল করতে বাধা দিতে চাই preventNavigation(), নির্বাহিত হয়েছে কিনা তা নিশ্চিত করার জন্য আমি সেই ইনপুটটিতে পরিবর্তনটি ট্রিগার করি :

function somethingThatModifiesAFormDynamically() {

    // Do something that modifies a form

    // ...
    $("#dummy_input").trigger("change");
    // ...
}
— মাইক
সূত্র
3

এখানে এটি চেষ্টা করুন এটি 100% কাজ করে 

<html>
<body>
<script>
var warning = true;
window.onbeforeunload = function() {  
  if (warning) {  
    return "You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes";  
    }  
}

$('form').submit(function() {
   window.onbeforeunload = null;
});
</script>
</body>
</html>
— Braydon
সূত্র
3

মান রাজ্যের যে প্ররোচনা বাতিল করে নিয়ন্ত্রণ করা যায় beforeunload ঘটনা বা একটি থেকে ফেরত মান নির্ধারণের অ নাল মান । এতে আরও বলা হয়েছে যে লেখকদের রিটার্নভ্যালুর পরিবর্তে ইভেন্ট.প্রিভেন্টড্যাফল্ট () ব্যবহার করা উচিত এবং ব্যবহারকারীর কাছে প্রদর্শিত বার্তাটি অনুকূলিতকরণযোগ্য নয় ।

69.0.3497.92 হিসাবে, ক্রোম মানটির সাথে মেলে নি। তবে, এখানে একটি বাগ রিপোর্ট দায়ের করা হয়েছে, এবং একটি পর্যালোচনা রয়েছে চলছে। ক্রোমের জন্য ইভেন্ট অবজেক্টের রেফারেন্স অনুসারে রিটার্নভ্যালু সেট করা দরকার, হ্যান্ডলারের দ্বারা ফেরানো মান নয়।

পরিবর্তন করা হয়েছে কিনা তা ট্র্যাক করা লেখকের দায়িত্ব; এটি কোনও পরিবর্তনশীল দিয়ে বা ইভেন্টটি যখন প্রয়োজন হয় কেবল তখনই পরিচালনা করা হয় তা নিশ্চিত করেই করা যেতে পারে।

window.addEventListener('beforeunload', function (e) {
    // Cancel the event as stated by the standard.
    e.preventDefault();
    // Chrome requires returnValue to be set.
    e.returnValue = '';
});
    
window.location = 'about:blank';
স্নিপেট প্রসারিত করুন

— ট্রেভর করজনিস
সূত্র
2

যখন ব্যবহারকারী ফর্মটিতে পরিবর্তন করা শুরু করবেন, একটি বুলিয়ান পতাকা সেট করা হবে। যদি ব্যবহারকারী পৃষ্ঠা থেকে দূরে নেভিগেট করার চেষ্টা করে, আপনি উইন্ডোটিতে সেই পতাকাটি চেক করুন unউনলোড করুন ইভেন্ট। পতাকাটি সেট করা থাকলে আপনি বার্তাটি স্ট্রিং হিসাবে ফিরিয়ে দিয়ে দেখান। স্ট্রিং হিসাবে বার্তাটি ফিরিয়ে দেওয়া আপনার বার্তাটি সহ একটি নিশ্চিতকরণ ডায়ালগ পপআপ করবে।

আপনি যদি পরিবর্তনগুলি সংঘবদ্ধ করতে এজাক্স ব্যবহার করে থাকেন falseতবে পরিবর্তনগুলি সংঘটিত হওয়ার পরে আপনি পতাকাটি সেট করতে পারেন (যেমন অ্যাজাক্স সাফল্যের ইভেন্টে)।

— কীর্তন
সূত্র
1

আপনি onchangeটেক্সারিয়াতে (বা অন্য কোনও ক্ষেত্র) একটি ইভেন্ট যুক্ত করতে পারেন যা জেএসে একটি পরিবর্তনশীল সেট করে। যখন ব্যবহারকারী পৃষ্ঠাটি বন্ধ করার চেষ্টা করবেন (উইন্ডো.অনলোড) আপনি সেই ভেরিয়েবলের মানটি পরীক্ষা করেন এবং সেই অনুযায়ী সতর্কতা দেখান।

— মাকরাম সালেহ
সূত্র
1
আপনি এটি করতে পারবেন না - alertএবং confirmসময়কালে window.onbeforeunloadএবং window.onunload(আমার পিসিতে ক্রোমের সংস্করণে খুব কমপক্ষে, তবে সম্ভবত প্রতিটি ব্রাউজারেও hand হ্যান্ডলারগুলিকে সমর্থন করার জন্য) অবরুদ্ধ করা হয় ।
— মার্ক আমেরিকা
1

এই থ্রেডের সমস্ত উত্তরের ভিত্তিতে আমি নিম্নলিখিত কোডটি লিখেছি এবং এটি আমার পক্ষে কাজ করেছে worked

যদি আপনার কেবলমাত্র কিছু ইনপুট / টেক্সারিয়া ট্যাগ থাকে যার জন্য অননলোড ইভেন্টটি পরীক্ষা করা দরকার, আপনি HTML5 ডেটা-বৈশিষ্ট্য হিসাবে নির্ধারণ করতে পারবেন data-onunload="true"

যেমন।

<input type="text" data-onunload="true" />
<textarea data-onunload="true"></textarea>

এবং জাভাস্ক্রিপ্ট (jQuery) এর মতো দেখতে পারে:

$(document).ready(function(){
    window.onbeforeunload = function(e) {
        var returnFlag = false;
        $('textarea, input').each(function(){
            if($(this).attr('data-onunload') == 'true' && $(this).val() != '')
                returnFlag = true;
        });

        if(returnFlag)
            return "Sure you want to leave?";   
    };
});
— সাগর গালা
সূত্র
2
আরও দেখুন "কিছু কারণে, ওয়েবকিট ভিত্তিক ব্রাউজার ডায়ালগ বক্স জন্য বৈশিষ্ট অনুসরণ করো না" MDN এর beforeunload ডকুমেন্টেশন ।
— আরজান
1

এখানে আমার এইচটিএমএল 

<!DOCTYPE HMTL>
<meta charset="UTF-8">
<html>
<head>
<title>Home</title>
<script type="text/javascript" src="script.js"></script>
</head>

 <body onload="myFunction()">
    <h1 id="belong">
        Welcome To My Home
    </h1>
    <p>
        <a id="replaceME" onclick="myFunction2(event)" href="https://www.ccis.edu">I am a student at Columbia College of Missouri.</a>
    </p>
</body>

এবং তাই এইভাবে আমি জাভা স্ক্রিপ্ট মধ্যে অনুরূপ কিছু করেছি

var myGlobalNameHolder ="";

function myFunction(){
var myString = prompt("Enter a name", "Name Goes Here");
    myGlobalNameHolder = myString;
    if (myString != null) {
        document.getElementById("replaceME").innerHTML =
        "Hello " + myString + ". Welcome to my site";

        document.getElementById("belong").innerHTML =
        "A place you belong";
    }   
}

// create a function to pass our event too
function myFunction2(event) {   
// variable to make our event short and sweet
var x=window.onbeforeunload;
// logic to make the confirm and alert boxes
if (confirm("Are you sure you want to leave my page?") == true) {
    x = alert("Thank you " + myGlobalNameHolder + " for visiting!");
}
}
— জাস্টিন স্টোন
সূত্র
0

অন চেঞ্জ-এ সত্যিকারের চেঞ্জফ্লেগ সেট করে এটি সহজেই করা যায় ঘটনা পাঠ্য এলাকা । চেঞ্জফ্ল্যাগ মানের উপর ভিত্তি করে নিশ্চিত ডায়ালগ বাক্সটি দেখানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন । ফর্মটি বাতিল করুন এবং যদি নিশ্চিত হয়ে যায় তবে অনুরোধকৃত পৃষ্ঠায় নেভিগেট করুন , অন্যথায় কিছুই করবেন না ।

— simplyharsh
সূত্র
-1

বডি ট্যাগের জন্য একটি "অননলোড" পরামিতি রয়েছে আপনি সেখান থেকে জাভাস্ক্রিপ্ট ফাংশনগুলিতে কল করতে পারেন। যদি এটি মিথ্যা প্রত্যাবর্তন করে তবে তা চলাচল বন্ধ করে দেয়।

— stribika
সূত্র
13
ভাগ্যক্রমে, এটি আসলে কাজ করে না। অন্যথায় আমি যুক্ত একটি পৃষ্ঠাতে ঘৃণা করব <body onunload="return false;">।
— সেরেন লভবর্গ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.