জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে ব্রাউজারের পিছনে বাটন থামাতে হয়

155

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

আমি উত্স কোড অন্তর্ভুক্ত করেছি। টাইমারটি cdtimer.js এ সংরক্ষণ করা হয়

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

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

javascript  browser 
— সাওয়ান্ত অক্ষয়
সূত্র
— দর্শনা দীক্ষিত

উত্তর:

157

ব্যাক বোতামটি অক্ষম করা সত্যিই কাজ করবে না এমন অসংখ্য কারণ রয়েছে। আপনার সেরা বাজি ব্যবহারকারীকে সতর্ক করা:

window.onbeforeunload = function() { return "Your work will be lost."; };

এই পৃষ্ঠাটি আপনি ব্যাকটি বোতামটি নিষ্ক্রিয় করার চেষ্টা করতে পারেন এমন কয়েকটি উপায়ে তালিকাবদ্ধ করে তবে কোনওটিরই নিশ্চয়তা নেই:

http://www.irt.org/script/311.htm

— ColinE
সূত্র
উত্তরটি ইতিমধ্যে জমা দেওয়া হয়েছে এবং যদি তা প্রত্যাখাত হয় তবে আপনার নিজের পিএইচপি কোডটি চেক করা উচিত।
— সেলা ইয়ার
4
এটি এতই জিনিষ কহতব্য এখন আধুনিক ব্রাউজারে পরিবর্তিত হয়েছে: দেখুন stackoverflow.com/questions/19926641/...
— devrobf
127

ওয়েব ব্রাউজারের ডিফল্ট আচরণকে ওভাররাইড করা সাধারণত একটি খারাপ ধারণা। সুরক্ষার কারণে ক্লায়েন্ট সাইড স্ক্রিপ্টটিতে এটি করার পর্যাপ্ত অধিকার নেই।

অনুরূপ কয়েকটি প্রশ্ন জিজ্ঞাসা করা হয়েছে,

আপনি ব্রাউজারের ব্যাক বোতামটি অক্ষম করতে পারবেন না । তবে আপনি আপনার যুক্তি ব্যবহার করে যাদু করতে পারেন যাতে ব্যবহারকারীদের ফিরে যাওয়া থেকে আটকাতে পারে যা এটি অক্ষম হওয়ার মতো একটি ছাপ তৈরি করে impression এখানে কীভাবে নীচের স্নিপেটটি দেখুন।

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

এটি খাঁটি জাভাস্ক্রিপ্টে তাই এটি বেশিরভাগ ব্রাউজারগুলিতে কাজ করবে। এটি ব্যাকস্পেস কীটি নিষ্ক্রিয় করবে তবে কী inputক্ষেত্রগুলির অভ্যন্তরে এবং স্বাভাবিকভাবে কাজ করবে textarea।

প্রস্তাবিত সেটআপ:

এই স্নিপেটটি একটি পৃথক স্ক্রিপ্টে রাখুন এবং এমন পৃষ্ঠায় অন্তর্ভুক্ত করুন যেখানে আপনি এই আচরণটি চান। বর্তমান সেটআপে এটি ডিওএমের onloadইভেন্টটি কার্যকর করবে যা এই কোডের জন্য আদর্শ প্রবেশের পয়েন্ট।

ওয়ার্কিং ডেমো!

নিম্নলিখিত ব্রাউজারগুলিতে পরীক্ষিত এবং যাচাই করা হয়েছে,

  • ক্রোম।
  • ফায়ারফক্স।
  • আইই (8-11) এবং এজ।
  • সাফারি।
— Rohit416
সূত্র
1
সেটটাইমআউট কেন বুঝতে পারছি না। আমি যদি প্রাথমিকভাবে # যোগ করি! অবস্থান নির্ধারণ এবং সেটটাইমআউট সরান, এটি এখনও কাজ করে।
— বারাবার
হ্যাঁ সত্য, এটি কাজ করবে, তবে আমি যদি স্মৃতি থেকে কিছু স্মরণ করতে পারি যখন আমার প্রথম স্থান ছিল ... প্রবাহটি অন্য ব্রাউজারগুলির মতো ক্রোমে সঠিকভাবে কাজ করছে না। ক্রোম location.hashশুরুর দিকে খালি ফিরে এসেছিল তাই এটি আমাকে এটির মতো করে তোলে। এতে আরও উন্নতি হতে পারে তবে ৫০ এমএসে একবারে আমার খুব বেশি খরচ হয় নি তাই আমি এটি সেখানে রেখে দিয়েছি।
— রোহিত 416
ওহ, এটি একটি মেমরি চ্যালেঞ্জ ছিল, আপনাকে ধন্যবাদ :) আমি আপনার সমাধানটি ব্যবহার করেছি, তবে সেটটি ইন্টারভালটি .onhashchange হ্যান্ডলার দ্বারা প্রতিস্থাপন করেছি। পুরোপুরি কাজ করে। তবে আমার আর একটি প্রশ্ন রয়েছে: কেন "যদি (গ্লোবাল.লোকেশন.হ্যাশ! = _হ্যাশ)" করবেন? আমি মনে করি এই অবস্থাটি সর্বদা সত্য হতে পারে কারণ উইন্ডো.লোকশন.হ্যাশ সবসময় '#' অক্ষর দিয়ে হ্যাশ ফিরিয়ে দেয় এবং _হ্যাশটিতে কখনই '#' ক্যারাকটর থাকবে না। আপনি কি কিছু মনে আছে? ব্রাউজার লোকেশন.শ্যাশে '#' চরটি না ফেরানোর ক্ষেত্রে এটি কি কেবল একটি সুরক্ষা?
— বারাবার
আমি প্রস্তাবিত হিসাবে একটি .js ফাইল তৈরি করেছি এবং নিম্নলিখিতটি ব্যবহার করে আমার কোডে জেএস ফাইলটি অন্তর্ভুক্ত করেছি: <স্ক্রিপ্ট src = "./ জাভাস্ক্রিপ্ট / নোব্যাক.জেএস"> </script> তবে আমি এখনও একটি পিছনে (সাফারি ব্যবহার করে) সম্পাদন করতে পারি। আমি কী মিস করছি? এই লাইব্রেরিটি আমি ব্যবহার করি এমন অন্যান্য লাইব্রেরির মতোই ফ্যাশনে যুক্ত হয়েছিল, তাই অন্তর্ভুক্তিটি ভাল।
— টিম
কোডটি উল্লিখিত সমস্ত ব্রাউজারগুলিতে এবং সর্বশেষে যখন পরীক্ষিত হয়েছিল যে এটি সকলের মধ্যে কাজ করে যাচ্ছিল। আমি আজ সাফারিতে এটি পরীক্ষা করেছি এবং এটি কাজ করছে। আপনি কি কেবল সাফারিতে ওয়ার্কিং ডেমো লিঙ্কটি খুলতে পারেন এবং এটি আপনার শেষের দিকে কাজ করে কিনা তা দেখতে পারেন?
— রোহিত 416
74 
<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
— vrfvr
সূত্র
3
জিনিয়াস! আমি ব্যাক বোতামের দুর্ঘটনাজনিত ট্রিগার প্রতিরোধ করতে এটি ব্যবহার করেছি যখন ব্যবহারকারী ব্যাকস্পেসে আঘাত করে (উদাহরণস্বরূপ অক্ষম / পঠন ক্ষেত্রগুলিতে) উদাহরণস্বরূপ) এমন কোনও ওয়েব অ্যাপ্লিকেশন যেখানে পিছনে / ফরোয়ার্ড সত্যিই কোনভাবেই বোঝায় না। নিশ্চিত হওয়া কনটেক্সট মেনু বিকল্প সহ পিছনে এবং সামনের কার্যকারিতা অক্ষম করে তোলে (বোতামগুলি সেগুলি নয়); আইই 11, ক্রোম এবং এফএফ এর মাধ্যমে আইই 8 তে যাচাই করা হয়েছে।
— অযৌক্তিকভাবে
1
এটি কাজ করে তবে পাঠ্যবাক্সগুলিতে প্রবেশ করা সমস্ত ডেটা পুনরায় সেট করে। ক্লিয়ারিং রোধ করা কি সম্ভব?
— সোমনিয়াম
6
এটি আমার জন্য ফায়ারফক্সে কাজ করেছে, তবে ক্রোমে নয় (সংস্করণ 36.0.1985.143)
— বারাবার
এটি আমার পক্ষেও কাজ করেছিল, তবে ফায়ারফক্সে এটি window.history.back()ফাংশনটি ভেঙেছে বলে মনে হচ্ছে । আমরা ব্রাউজারের ব্যাক বোতামে ক্লিক করা ব্যবহারকারীদের আটকাতে চাই, তবে কিছু ক্ষেত্রে আমরা পৃষ্ঠায় আমাদের নিজস্ব পিছনের বোতামটি সরবরাহ করি। এটি কাজ করার কোনও উপায় আছে?
— AsGoodAsItGates
1
এটি আমার পক্ষে কাজ করে না। আমি উইন্ডোজ ১০-এ ক্রোম সংস্করণ ৫৫ ব্যবহার করছি I আমি স্ক্রিপ্টটি বেশ কয়েকটি জায়গায় রেখেছি (শিরোনামের শুরু, শরীরের শেষ ইত্যাদি) এবং আমি এখনও আগের পৃষ্ঠায় ফিরে যেতে পিছনের বোতামটি ব্যবহার করতে পারি।
— ভিক্টর Stoddard
73

আমি এটি পেরিয়ে এসেছি, মোবাইল সাফারি (পোস্ট করার সময় আইওএস 9) সহ বিভিন্ন ব্রাউজারগুলিতে সঠিকভাবে এবং "সুন্দরভাবে" কাজ করে এমন একটি সমাধানের দরকার পড়ে । সমাধানগুলির কোনওোটাই একদম সঠিক ছিল না। আমি নিম্নলিখিতটি অফার করি (আইই 11, ফায়ারফক্স, ক্রোম এবং সাফারিতে পরীক্ষিত):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

নিম্নলিখিত নোট:

  • history.forward()(আমার পুরানো সমাধান) মোবাইল সাফারি তে কাজ করে না --- এটি কিছুই করার মতো মনে হচ্ছে না (যেমন ব্যবহারকারী এখনও ফিরে যেতে পারে)। history.pushState()তাদের সব উপর কাজ করে।
  • তৃতীয় যুক্তিটি history.pushState()একটি ইউআরএল । যে সমাধানগুলি যেমন স্ট্রিংটি পাস করে 'no-back-button'বা 'pagename'ঠিক কাজ করে বলে মনে হচ্ছে, ততক্ষণ আপনি পৃষ্ঠায় একটি রিফ্রেশ / পুনরায় লোড করার চেষ্টা না করেন, যখন ব্রাউজারটি তার url হিসাবে কোনও পৃষ্ঠা সন্ধান করার চেষ্টা করে তখন "পৃষ্ঠা পাওয়া যায় না" ত্রুটি উত্পন্ন হয়। (ব্রাউজার এছাড়াও এড্রেস বারে যখন পৃষ্ঠা, যা কুশ্রী উপর যে স্ট্রিং অন্তর্ভুক্ত করা হয়।) location.hrefURL এর জন্য ব্যবহার করা উচিত।
  • 2 য় তর্কটি history.pushState()একটি শিরোনাম । বেশিরভাগ জায়গাতেই ওয়েবে ঘুরে দেখা যায় এটি "ব্যবহৃত হয় না" এবং এখানকার সমস্ত সমাধান এর nullজন্য পাস করে। যাইহোক, মোবাইল সাফারিতে অন্ততপক্ষে, পৃষ্ঠাটির ইউরালটিকে ইতিহাসের ড্রপডাউনে রাখে যা ব্যবহারকারী অ্যাক্সেস করতে পারে। কিন্তু যখন এটি কোনও পৃষ্ঠার জন্য সাধারণভাবে একটি দর্শন যোগ করে, তখন এটি তার শিরোনামে রাখে , যা ভাল। সুতরাং document.titleএকই আচরণের জন্য ফলাফল পাস ।
— JonBrave
সূত্র
3
এটা সঠিক উত্তর. ক্রোম, আইই ১১, ফায়ারফক্স এবং এজ এ পুরোপুরি কাজ করে।
— কনসেপ্ট 211
3
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, এটি ক্রস প্ল্যাটফর্ম এবং ঠিক কাজ করে।
— ক্যালবার্টস
ইন jsp সেভলেট জমা দেওয়ার পরে আমি পৃষ্ঠাটি রিফ্রেশ করি। পৃষ্ঠাটি প্রদর্শন করা হয়নি (ত্রুটি)
— মধুকা দিলহান
এখন অবধি সেরা সমাধান, তবে সম্ভবত পুরানো ব্রাউজারগুলিতে কাজ করছে না
— j4n7
2
আধুনিক ব্রাউজারগুলির জন্য উপযুক্ত সমাধান। আমি পুরানো ব্রাউজারকে কন্ডিশন টাইপ (হিস্ট্রি.পুষস্টেট) === "ফাংশন" কাজটি মসৃণ ব্যবহার করে সমর্থন করার জন্য @ রোহিত 416 উত্তরটির সাথে একত্রিত করেছি।
— মিক্লোস ক্রিভান
28

এই কোডটি আধুনিক ব্রাউজারগুলির পিছনে বোতামটি অক্ষম করবে যা এইচটিএমএল 5 ইতিহাস এপিআই সমর্থন করে। সাধারণ পরিস্থিতিতে, পিছনের বোতামটি চাপানো পূর্বের পৃষ্ঠায় এক ধাপ পিছনে যায়। আপনি যদি ইতিহাস.pushState () ব্যবহার করেন তবে আপনি বর্তমান পৃষ্ঠায় অতিরিক্ত উপ-পদক্ষেপ যুক্ত করতে শুরু করুন। এটি যেভাবে কাজ করে তা হ'ল আপনি যদি ইতিহাস.পুশ স্টেট () তিনবার ব্যবহার করেন, তবে পিছনের বোতামটি টিপতে শুরু করুন, প্রথমবার তিনবার এই উপ-পদক্ষেপে ফিরে যেতে হবে, এবং চতুর্থবারের মতো ফিরে যেতে হবে পূর্ববর্তী পৃষ্ঠা

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

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
— জেরেমি ওয়ার্ন
সূত্র
2
যে কোনও ব্রাউজারে, এর পরে একটি পৃষ্ঠা পুনরায় রিফ্রেশ / পুনরায় লোড চেষ্টা করুন এবং এটি একটি পৃষ্ঠা খুঁজে পাওয়ার চেষ্টা করার সাথে আপনি একটি "পৃষ্ঠা খুঁজে পাওয়া যায়নি" ত্রুটিতে আটকে যাবেন no-back-button... (ব্রাউজারটিও no-back-buttonঠিকানায় প্রদর্শিত হতে পারে বারও, যা দেখতে কুৎসিত মনে হয়) 3 য় যুক্তি history.pushState()একটি হল URL , এবং আপনার বর্তমান পৃষ্ঠার URL হওয়া আবশ্যক: ব্যবহার location.hrefপরিবর্তে।
— জনব্রেভ
4
এটি আমার পক্ষে কাজ করেছে। কেবল 'উইন্ডো.টপ.লোকেশন.প্যাথনাম + উইন্ডো.টপ.লোকেশন.সর্চ "তে' নো-ব্যাক-বোতাম 'পরিবর্তন করুন এবং এটি আপনি যে পৃষ্ঠায় রয়েছেন তার নামটি এমনকি রিফ্রেশে থাকবে
— স্টিভ
অন্যদের মধ্যে, এটি আমার পক্ষে কাজ করেছে, উজ্জীবিত। পড়ুন stackoverflow.com/questions/19926641/... ।
— ব্যবহারকারী 2171669
আমি অনেকগুলি ক্ষেত্রে অন্বেষণ করেছি এবং এটি 1 পৃষ্ঠার সাইটের সেরা সমাধান
— djdance
এটি একটি খুব খারাপ সমাধান কারণ আপনি ইউআরএল পরিবর্তন করছেন, তাই আপনি যদি কয়েকবার পিছনে পিছনে আঘাত করেন তবে ক্রোম এমন কোনও পথে পুনর্নির্দেশ করবে যা অস্তিত্বহীন
— টালবয়
21

ব্রাউজার ব্যাক ইভেন্ট সীমাবদ্ধ করার জন্য

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— ফজল হালাই
সূত্র
1
এটি ক্রোমে দুর্দান্ত কাজ করে !, কেন মানুষ উত্তম উত্তর হিসাবে ভোট দিচ্ছে না?
— তারেক সেয়েসিরি
1
আমি কেবলমাত্র নিম্নলিখিত ব্রাউজারগুলিতে উইন্ডোজ 10 ওএস ব্যবহার করে এটি পরীক্ষিত করেছি (দুর্দান্ত কাজ করে) Chrome সংস্করণ 74.0.3729.108 (অফিসিয়াল বিল্ড) (64-বিট) ক্রোম ক্যানারি সংস্করণ 76.0.3780.0 (অফিসিয়াল বিল্ড) ক্যানারি (32-বিট) ক্রোমিয়াম সংস্করণ 66.0। 3355.0 (বিকাশকারী বিল্ড) (-৪-বিট) ফায়ারফক্স .0 66.০.৩ (-৪-বিট) EDGE IE 11 সাফারি 5.1.7
— তারেক সেয়েসিরি
2
@ তারেকসিয়েসিরি কারণ এটি কেবল ব্রাউজারগুলিতে কাজ করে যে ক) ইতিহাসের এপিআই সমর্থন করে খ) পৃষ্ঠাটি বাস্তবে রাষ্ট্র পরিচালনার জন্য ইতিহাসের এপিআই ব্যবহার করছে
— givanse
সংস্করণ 75 এর পরে ক্রোমে আর কাজ করছে না See দেখুন: support.google.com/chrome/thread/8721521?hl=en
— জিন খ।
13 

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

— ইঞ্জিনিয়ার মাহমুদ এল টরি
সূত্র
12
যদিও এটি একটি বৈধ উত্তর হতে পারে তবে কোডটি কী করে এবং কীভাবে এটি কাজ করে তা ব্যাখ্যা করে আপনি অন্যদের সাহায্য করার সম্ভাবনা অনেক বেশি। কেবল কোডের উত্তরগুলিতে কম ইতিবাচক মনোযোগ পাওয়া যায় এবং অন্যান্য উত্তরের মতো কার্যকর হয় না।
— অরোরা 10001
ক্রোম, ফায়ারফক্স, আইই এবং এজতে পরীক্ষিত। এটা ভাল কাজ করে. তুমি আমাকে বাঁচালে.
— নুওভিস বুয়
12

এটি আমি এটি সম্পাদন করতে পারি। অদ্ভুতভাবে উইন্ডোটি পরিবর্তন করা হয়েছে l ঘটেছিল যে লোকেশন.হ্যাশ ক্রোম এবং সাফারির জন্য ইতিহাসে কোনও এন্ট্রি তৈরি করে না। সুতরাং আপনাকে পুশস্টেট ব্যবহার করতে হবে। এটি আমার জন্য সমস্ত ব্রাউজারে কাজ করছে।

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };
— Sanchitos
সূত্র
1
এটি আই 9 এবং এর নীচে কাজ করে না, পুশস্টেট সমর্থিত নয়।
— অ্যালেক্স
গ্রেট। এটি একটি ভাল পদ্ধতির এবং প্রায় সব সাম্প্রতিক ব্রাউজারগুলিতে কাজ করে।
— ভেনুগোপাল এম
1
আইই এর পরে দুর্দান্ত কাজ করে। কেবলমাত্র ডকুমেন্টে সরাসরি রাখুন $(document).ready(function () { .... });
— ready প্রস্তুতি
মনে রাখবেন যে "#nbb" এর আগে আপনাকে অবশ্যই আপনার বর্তমান uri যুক্ত করতে হবে। অর্থাত্ "অ্যাকাউন্ট # এনবিবি"
— ম্লাদেন
9 
<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>
— আশ্বিন পাতিল
সূত্র
কোথাও কিছু ডকুমেন্টেশন আছে event.persisted?
— মুহাদ্দে
1
আপনার প্রশ্নের লিংকটি এখানে পাওয়া গেল। এটি এখানে @ মুহ্দ
— 3'17
8

Jordanhollinger.com এ এই নিবন্ধটি আমার মনে হয় সেরা বিকল্প। রেজারের উত্তরের মতো তবে কিছুটা পরিষ্কার। নীচে কোড; জর্ডান হোলিংগারের সম্পূর্ণ ক্রেডিট:

পৃষ্ঠার পূর্বে:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

কোনও ফেরতের জাভাস্ক্রিপ্টের পৃষ্ঠা:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}
— dav_i
সূত্র
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

এই জাভাস্ক্রিপ্টটি কোনও ব্যবহারকারীর ফিরে যেতে দেয় না (ক্রোম, এফএফ, আইই, এজ এ কাজ করে)

— সুরজিৎ মিত্র
সূত্র
5

স্বাচ্ছন্দ্যে চেষ্টা করুন:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});
— Lakhan
সূত্র
5

এই কোডটি সর্বশেষতম ক্রোম এবং ফায়ারফক্স ব্রাউজারগুলির সাথে পরীক্ষিত।

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>
— ফ্র্যাঙ্কলিন ইনোসেন্ট এফ
সূত্র
স্বাগতম হুহোহ্যাং
— ফ্রাঙ্কলিন ইনোসেন্ট এফ
3

পৃষ্ঠার পরে কোনও হস্তক্ষেপ না করে পিছনের তীরটি ভাঙ্গার জন্য খুব সহজ এবং পরিষ্কার ফাংশন।

উপকারিতা:

  • তাত্ক্ষণিকভাবে লোড হয় এবং আসল হ্যাশ পুনরুদ্ধার করে, যাতে ব্যবহারকারী দৃশ্যমান পরিবর্তিত ইউআরএল দ্বারা বিভ্রান্ত হয় না।
  • ব্যবহারকারী এখনও 10 বার পিছনে টিপে বেরিয়ে যেতে পারেন (এটি একটি ভাল জিনিস) তবে দুর্ঘটনাক্রমে নয়
  • অন্যান্য সমাধানগুলি ব্যবহার করে ব্যবহারকারীর হস্তক্ষেপ নেই onbeforeunload
  • এটি কেবল একবারে চালিত হয় এবং যদি আপনি এটি ট্র্যাক করার জন্য ব্যবহার করেন তবে হ্যাশ ম্যানিপুলেশনগুলির সাথে আরও হস্তক্ষেপ করবে না
  • মূল হ্যাশ পুনরুদ্ধার করুন, তাই প্রায় অদৃশ্য।
  • ব্যবহার করে setIntervalতাই এটি ধীর ব্রাউজারগুলিকে ভেঙে না ফেলে এবং সর্বদা কাজ করে।
  • খাঁটি জাভাস্ক্রিপ্ট, HTML5 ইতিহাসের প্রয়োজন হয় না, সর্বত্র কাজ করে everywhere
  • নিরঙ্কুশ, সহজ, এবং অন্যান্য কোডের সাথে ভাল খেলে।
  • unbeforeunloadমডেল ডায়ালগ দিয়ে ব্যবহারকারীকে বাধা দেয় এমনটি ব্যবহার করে না ।
  • এটি কেবল গোলমাল ছাড়াই কাজ করে।

দ্রষ্টব্য: অন্য কয়েকটি সমাধান ব্যবহার করে onbeforeunload। দয়া করে না ব্যবহার onbeforeunloadএই উদ্দেশ্যে, যা একটি ডায়ালগ পপ আপ ব্যবহারকারীদের উইন্ডো বন্ধ করতে চেষ্টা যখনই, হিট backarrow, ইত্যাদি মোডাল মত onbeforeunloadযেমন সাধারণত বিরল পরিস্থিতিতে যথাযথ যখন তারা আসলে স্ক্রিন এবং আশ্রয়স্থল উপর পরিবর্তন করেছি ' টি এগুলি নয়, এ উদ্দেশ্যে নয়।

কিভাবে এটা কাজ করে

  1. পৃষ্ঠা লোডে কার্যকর করে
  2. আপনার আসল হ্যাশ সংরক্ষণ করে (যদি একটিতে ইউআরএল থাকে)।
  3. ধারাবাহিকভাবে # / নূপুর / op 1..10} হ্যাশে যুক্ত হয়
  4. মূল হ্যাশ পুনরুদ্ধার করুন

এটাই. চারপাশে আর গোলযোগ নেই, ব্যাকগ্রাউন্ড ইভেন্ট মনিটরিং নেই, আর কিছুই নয়।

এটি এক সেকেন্ডে ব্যবহার করুন

স্থাপনার জন্য, কেবল এটি আপনার পৃষ্ঠায় বা আপনার জেএস-এ যে কোনও জায়গায় যুক্ত করুন:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>
— মারাত্মক ত্রুটি
সূত্র
2

মনে হয় এটি ব্রাউজারের পিছনের বোতামটি অক্ষম করার পাশাপাশি আপনার পিছনে নিয়ে যাওয়ার ব্যাকস্পেস বোতামটি অক্ষম করার ক্ষেত্রে আমাদের পক্ষে কাজ করেছে। 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
— jgabb
সূত্র
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
— user3789888
সূত্র
1

আপনি কেবল এটি করতে পারবেন না এবং করা উচিত নয়। তবে এটি সহায়ক হতে পারে

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

আমার ক্রোম এবং ফায়ারফক্সে কাজ করে

— শৈলেন্দ্র শর্মা
সূত্র
1

আইই-তে ব্যাকস্পেস বোতামটি রোধ করতে এটি চেষ্টা করুন যা ডিফল্টরূপে "পিছনে" হিসাবে কাজ করে:

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>
— অজিত কম্বলে
সূত্র
1

আমি বিশ্বাস করি নিখুঁত তবুও সমাধানটি আসলে বেশ সোজা, যা আমি বহু বছর ধরে ব্যবহার করেছি।

এটি মূলত চলমান দস্তাবেজ 'মাউসেন্টার' / 'মাউসলেভ' ইভেন্টগুলির সাথে উইন্ডোর "অনবরেডনলোড" ইভেন্টটি বরাদ্দ করে থাকে যাতে ক্লিকগুলি নথির স্কোপের বাইরে থাকে (তখন ব্রাউজারের পিছনে বা ফরোয়ার্ড বোতাম হতে পারে) সতর্কতাটি কেবল ট্রিগার করে gers

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);
— আবদেলকোদ্দৌস রিফাই
সূত্র
1

একটি আধুনিক ব্রাউজারে এটি কাজ করছে বলে মনে হচ্ছে:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)
— জোয়াকিম এল ক্রিশ্চেনসেন
সূত্র
1
কী হয়েছে তা নিশ্চিত নয়, তবে কোনও কারণে আমি এই উত্তরটি অন্য মেশিনে বাদ দিয়েছি। কেবল আপনাকে জানাতে হবে এটি আমার উদ্দেশ্য নয়, তবে আমি আর ভোটটি পূর্বাবস্থায় ফেরাতে পারি না: /
— লেনার্ড ফন্টেজন
@ লেনার্ডফন্টেজন কোন অনুভূতিতে আঘাত না পেয়ে :)
— জোয়াকিম এল
1

সর্বাধিক উত্সাহিত উত্তরগুলির মধ্যে আমার পক্ষে ক্রোম 79 -তে কোনও কাজ হয়নি । দেখে মনে হচ্ছে Chrome এর সংস্করণ 75 এর পরে পিছনের বোতামের প্রতি শ্রদ্ধার সাথে তার আচরণ পরিবর্তন করেছে, এখানে দেখুন:

https://support.google.com/chrome/thread/8721521?hl=en

তবে, সেই গুগল থ্রেডে, একেবারে শেষের দিকে আজরুলমুকমিন আজমির দেওয়া উত্তরটি কাজ করেছিল did এটিই তার সমাধান।

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

ক্রোমের সমস্যা হ'ল আপনি ব্রাউজার অ্যাকশন না করা (যেমন কল হিস্ট্রি.ব্যাক) না করে অনপপস্টেট ইভেন্টটি ট্রিগার করে না। আমি এগুলি স্ক্রিপ্টে যুক্ত করেছি কেন।

তিনি কী লিখেছেন তা আমি পুরোপুরি বুঝতে পারি না, তবে স্পষ্টতই history.back() / history.forward()ক্রোম 75++ এ ব্লক করার জন্য এখন একটি অতিরিক্ত প্রয়োজন।

— জিন খ।
সূত্র
উচ্চ এবং নিম্ন অনুসন্ধানের পরে এটি শেষ পর্যন্ত অ্যান্ড্রয়েড ব্রাউজারগুলিতেও কাজ করেছে, যেখানে কোনও কারণে ব্রাউজারের পিছনের বোতামের ইভেন্টটি চেষ্টা করার মতো অন্য কোনও স্ক্রিপ্টগুলির সাথে সনাক্ত করা যায় নি। আপনাকে ধন্যবাদ, ধন্যবাদ, আবার আপনাকে ধন্যবাদ! ডেস্কটপ এবং মোবাইল উভয়ই Chrome 83 এর অধীনে পরীক্ষিত এবং সূক্ষ্মভাবে কাজ করা! জিন, আপনি একটি জীবন রক্ষাকারী!
— ইভান
0

আমি একটি HTML পৃষ্ঠা তৈরি করি (index.html)। আমি একটি (স্ক্রিপ্ট) ফোল্ডার / ডিরেক্টরিতে একটি (যান্ত্রিক.js) তৈরি করি। তারপরে, আমি ফর্ম, টেবিল, স্প্যান, এবং ডিভি ট্যাগগুলি প্রয়োজনীয় হিসাবে আমার সমস্ত কন্টেন্ট (index.html) এর ভিতরে রাখি। এখন, এখানে এমন কৌশলটি যা কিছু ফিরিয়ে / ফরোয়ার্ড করে দেবে!

প্রথমত, আপনার কেবলমাত্র একটি পৃষ্ঠা রয়েছে! দ্বিতীয়ত, নিয়মিত লিঙ্কগুলির মাধ্যমে যখন প্রয়োজন হয় একই পৃষ্ঠাতে লিখিত সামগ্রী লুকানোর এবং প্রদর্শন করতে স্প্যান / ডিভি ট্যাগ সহ জাভাস্ক্রিপ্টের ব্যবহার!

'Index.html' এর ভিতরে:

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

'মেকানিজম.জেস' এর ভিতরে:

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

এটি লোমশ দেখাচ্ছে, তবে ফাংশনটির নাম এবং কলগুলি, এমবেডড এইচটিএমএল এবং স্প্যান ট্যাগ আইডি কলগুলি নোট করুন। এটি আপনি একই পৃষ্ঠায় একই স্প্যান ট্যাগে বিভিন্ন এইচটিএমএল ইনজেক্ট করতে পারেন তা দেখানোর জন্য ছিল! কীভাবে পিছনে / ফরওয়ার্ড এই নকশাকে প্রভাবিত করতে পারে? এটি পারে না, কারণ আপনি একই জিনিসগুলিতে অবজেক্টগুলি গোপন করছেন এবং অন্যকে প্রতিস্থাপন করছেন!

কীভাবে লুকিয়ে প্রদর্শন করবেন? এখানে যায়: প্রয়োজন হিসাবে 'মেকানিজম.জেএস' এর ভিতরে ফাংশনগুলি ব্যবহার করুন:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

লিঙ্কগুলির মাধ্যমে 'index.html' কল ফাংশনের ভিতরে:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

এবং

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

আমি আশা করি আমি আপনাকে মাথা ব্যাথা করিনি। আমি যদি করলাম দুঃখিত :-)

— hacker1033
সূত্র
0

আমার ক্ষেত্রে এটি শপিংয়ের অর্ডার ছিল। সুতরাং আমি যা করলাম তা বোতামটি অক্ষম করে দেওয়া হয়েছিল। ব্যবহারকারী ফিরে ক্লিক করলে, বোতামটি এখনও অক্ষম ছিল। যখন তারা আবার একবার ক্লিক করে, এবং তারপরে এগিয়ে যাওয়ার জন্য একটি পৃষ্ঠার বোতামটি ক্লিক করে। আমি জানতাম যে তাদের অর্ডার জমা দেওয়া হয়েছে এবং অন্য পৃষ্ঠায় এড়ানো হয়েছে।

ক্ষেত্রে যখন পৃষ্ঠাটি রিফ্রেশ হবে যা বোতামটি তৈরি করবে (তাত্ত্বিকভাবে), উপলব্ধ; আমি তখন পৃষ্ঠা লোডে প্রতিক্রিয়া জানাতে সক্ষম হয়েছি যে আদেশটি ইতিমধ্যে জমা দেওয়া হয়েছে এবং তারপরেও পুনঃনির্দেশিত।

— Valamas
সূত্র
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— কমলেশ
সূত্র
3
1. javascript:আপনি লিখেছেন একটি "জাভাস্ক্রিপ্ট" নামে একটি জাভাস্ক্রিপ্ট লেবেল সংজ্ঞায়িত করে । আমি খুব সন্দেহ করেছিলাম যে আপনি তা করতে চেয়েছিলেন; আমি সন্দেহ করি আপনি href=javascript:...জাভাস্ক্রিপ্ট <script>ব্লকগুলির সাথে মিশ্রিত করছেন । 2. এইচটিএমএল 5 এ language="JavaScript"একটি বৈধ <script>বৈশিষ্ট্য হওয়া বন্ধ করে দিয়েছে । 3. উপরের 2 পয়েন্টগুলি খুব বেশি গুরুত্ব দেয় না; history.forward(1)মোবাইল সফারিতে (কমপক্ষে) কাজ করে না তা কী । history.pushState()পরিবর্তে একটি উত্তর ব্যবহার করুন।
— জোনব্রেভ
0

আপনি কেবল একটি ছোট স্ক্রিপ্ট রাখতে পারেন এবং তারপরে চেক করতে পারেন। এটি আপনাকে পূর্ববর্তী পৃষ্ঠাটি দেখার অনুমতি দেবে না। এটি জাভাস্ক্রিপ্টে করা হয়।

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

আপনি ব্রাউজারের মাধ্যমে পিছনে বা পূর্ববর্তী পৃষ্ঠায় দেখার চেষ্টা করার সময় উইন্ডো.নললোড ফাংশনটি জ্বলে ওঠে।

আশাকরি এটা সাহায্য করবে.

— noobprogrammer
সূত্র
0

আমি React.JS নিয়ে এই সমস্যাটি পেয়েছিলাম। (বর্গ উপাদান)

এবং সহজেই সমাধান করুন

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

আমি HashRouterথেকে ব্যবহার করেছি react-router-dom।

— ওও
সূত্র
0

কেবল সেট করুন location.hash="Something", ব্যাক বোতাম টিপলে হ্যাশটি ইউআরএল থেকে সরিয়ে ফেলা হবে তবে পৃষ্ঠাটি ফিরে যাবে না, দুর্ঘটনাক্রমে ফিরে যাওয়া রোধ করার জন্য এই পদ্ধতিটি ভাল তবে সুরক্ষার প্রয়োজনে পুনরায় উত্তর প্রতিরোধের জন্য আপনার ব্যাকএন্ডটি ডিজাইন করা উচিত

— অভিষেক
সূত্র
-1 
//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}
— Chauncey.Zhong
সূত্র
বিচারের শর্ত হিসাবে ইভেন্টের উত্সের ধরণ নির্ধারণ করতে 1 ইভেন্ট ইভেন্ট 2 পান। ৩. যখন ব্যাকস্পেস হিট হয়, তখন পাসওয়ার্ড বা একক ইভেন্টের উত্সের ধরণ এবং সত্য বা সক্ষম সম্পত্তিতে পঠনযোগ্য সম্পত্তিটি মিথ্যা হয়, তবে ব্যাকস্পেস কী ব্যর্থতা। ব্যাকস্পেসে আঘাত করলে, ইভেন্টটির উত্সটি পাসওয়ার্ড বা একক টাইপ করে, ব্যাকস্পেস কী ব্যর্থতা হয়
— চ্যানসি.জং
ব্যাক নেভিগেশন বোতামটি ব্যাকস্পেস কী নয় ব্যবহার করার বিষয়ে প্রশ্ন জিজ্ঞাসা করছে।
— কোয়ান্টিন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.