(দ্রষ্টব্য: শার্কির প্রতিক্রিয়া অনুসারে, ব্যাকস্পেসগুলি সনাক্ত করার জন্য আমি কোড অন্তর্ভুক্ত করেছি)
সুতরাং, আমি এই প্রশ্নগুলি প্রায়শই এসও তে দেখেছি এবং সম্প্রতি ব্যাক বোতামের কার্যকারিতা নিজেই নিয়ন্ত্রণ করার বিষয়টি নিয়ে এসেছি। আমার অ্যাপ্লিকেশনটির জন্য সেরা সমাধানের সন্ধানের কয়েক দিন পরে (হ্যাশ নেভিগেশন সহ একক পৃষ্ঠা), আমি পিছনের বোতামটি সনাক্ত করার জন্য একটি সহজ, ক্রস ব্রাউজার, লাইব্রেরি-কম সিস্টেম নিয়ে এসেছি।
বেশিরভাগ লোক ব্যবহার করার পরামর্শ দেয়:
window.onhashchange = function() {
//blah blah blah
}
যাইহোক, এই ফাংশনটি তখনও ডাকা হবে যখন কোনও ব্যবহারকারী ইন-পৃষ্ঠা উপাদানটিতে হ্যাশ পরিবর্তন করে element যখন আপনার ব্যবহারকারী ক্লিক করে এবং পৃষ্ঠাটি পিছনে বা এগিয়ে যায় তখন সেরা ব্যবহারকারীর অভিজ্ঞতা নয়।
আপনাকে আমার সিস্টেমের একটি সাধারণ রূপরেখা দেওয়ার জন্য, আমার ব্যবহারকারী ইন্টারফেসের মধ্য দিয়ে চলার সাথে সাথে আমি পূর্ববর্তী হ্যাশগুলির সাথে একটি অ্যারে পূরণ করছি। এটি দেখতে এমন কিছু দেখাচ্ছে:
function updateHistory(curr) {
window.location.lasthash.push(window.location.hash);
window.location.hash = curr;
}
অনেকটাই অকপট. আমি ক্রস-ব্রাউজার সমর্থন, পাশাপাশি পুরানো ব্রাউজারগুলির সমর্থন নিশ্চিত করতে এটি করি। কেবল নতুন হ্যাশটি ফাংশনে সরান, এবং এটি এটি আপনার জন্য সংরক্ষণ করবে এবং তারপরে হ্যাশ পরিবর্তন করবে (যা ব্রাউজারের ইতিহাসে পরে দেওয়া হয়)।
আমি একটি ইন-পেজ ব্যাক বোতামটিও ব্যবহার করি যা ব্যবহারকারীর পৃষ্ঠাগুলির মধ্যে lasthashঅ্যারে ব্যবহার করে moves দেখে মনে হচ্ছে:
function goBack() {
window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
//blah blah blah
window.location.lasthash.pop();
}
সুতরাং এটি ব্যবহারকারীকে শেষ হ্যাশে ফিরে যাবে এবং অ্যারে থেকে শেষ হ্যাশটি সরিয়ে ফেলবে (এখনই আমার কোনও ফরোয়ার্ড বোতাম নেই)।
So. কোনও ব্যবহারকারী আমার ইন-পেজ ব্যাক বাটন বা ব্রাউজার বোতামটি ব্যবহার করেছেন কিনা তা আমি কীভাবে সনাক্ত করব?
প্রথমে তাকালাম window.onbeforeunload , কিন্তু কোনও লাভ হয়নি - এটি কেবল তখনই বলা হয় যখন ব্যবহারকারী পৃষ্ঠাগুলি পরিবর্তন করতে চলেছেন। হ্যাশ নেভিগেশন ব্যবহার করে এটি একটি একক পৃষ্ঠা-অ্যাপ্লিকেশনটিতে ঘটে না।
সুতরাং, আরও কিছু খনন করার পরে, আমি পতাকা ভেরিয়েবল সেট করার চেষ্টা করার জন্য সুপারিশগুলি দেখেছি। আমার ক্ষেত্রে এটি হ'ল সমস্যাটি হ'ল আমি এটি সেট করার চেষ্টা করব, তবে সবকিছু যেমন অবিচ্ছিন্ন তাই হ্যাশ পরিবর্তনের ক্ষেত্রে বিবৃতিটি যথাযথভাবে সেট করা হবে না। .onMouseDownক্লিক এ সবসময় ডাকা হত না, এবং একটি অনক্লিক এ যুক্ত করা এটির পক্ষে এত দ্রুত ট্রিগার হবে না।
এই যখন আমি এর মধ্যে পার্থক্য তাকান শুরু document, এবং window। আমার চূড়ান্ত সমাধানটি হ'ল পতাকাটি ব্যবহার করে সেট করা document.onmouseoverএবং এটি ব্যবহার করে অক্ষম করা document.onmouseleave।
যা ঘটে তা হ'ল যখন ব্যবহারকারীর মাউস নথির ক্ষেত্রের ভিতরে থাকে (পড়ুন: উপস্থাপিত পৃষ্ঠা, তবে ব্রাউজারের ফ্রেম বাদ দিয়ে), আমার বুলিয়ান সেট করা আছে true। মাউস নথির ক্ষেত্রটি ছাড়ার সাথে সাথে বুলেটটি উল্টে যায়false ।
এইভাবে, আমি এতে আমার পরিবর্তন করতে পারি window.onhashchange:
window.onhashchange = function() {
if (window.innerDocClick) {
window.innerDocClick = false;
} else {
if (window.location.hash != '#undefined') {
goBack();
} else {
history.pushState("", document.title, window.location.pathname);
location.reload();
}
}
}
আপনি চেক নোট করবেন #undefined। এটি কারণ যদি আমার অ্যারেতে কোনও ইতিহাস উপলব্ধ না হয় তবে তা ফিরে আসে undefined। ব্যবহারকারীরা কোনও window.onbeforeunloadইভেন্ট ব্যবহার করে ছেড়ে যেতে চান কিনা তা জিজ্ঞাসা করার জন্য আমি এটি ব্যবহার করি ।
সুতরাং, সংক্ষেপে, এবং সেই সমস্ত লোকদের জন্য যারা ইতিহাস সংরক্ষণ করার জন্য কোনও ইন-পেজ ব্যাক বাটন বা অ্যারে ব্যবহার করেন না:
document.onmouseover = function() {
//User's mouse is inside the page.
window.innerDocClick = true;
}
document.onmouseleave = function() {
//User's mouse has left the page.
window.innerDocClick = false;
}
window.onhashchange = function() {
if (window.innerDocClick) {
//Your own in-page mechanism triggered the hash change
} else {
//Browser back button was clicked
}
}
এবং সেখানে আপনি এটা আছে। হ্যাশ নেভিগেশনের সাথে সম্পর্কিত পৃষ্ঠার উপাদানগুলিতে ইন-পৃষ্ঠ উপাদানগুলির ব্যাক ব্যাক ব্যবহার সনাক্ত করার একটি সহজ, তিন অংশের উপায়।
সম্পাদনা করুন:
ব্যবহারকারী পিছনের ইভেন্টটি ট্রিগার করতে ব্যাকস্পেস ব্যবহার না করে তা নিশ্চিত করতে আপনি নিম্নলিখিতগুলিও অন্তর্ভুক্ত করতে পারেন ( এই প্রশ্নে @ থিয়েলম্যানকে ধন্যবাদ ):
$(function(){
/*
* this swallows backspace keys on any non-input element.
* stops backspace -> back
*/
var rx = /INPUT|SELECT|TEXTAREA/i;
$(document).bind("keydown keypress", function(e){
if( e.which == 8 ){ // 8 == backspace
if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
e.preventDefault();
}
}
});
});