পৃষ্ঠাটি পুনরায় লোড না করে জাভাস্ক্রিপ্টে URL পরিবর্তন করা

জাভাস্ক্রিপ্টের সাথে গতিশীলভাবে URL পরিবর্তন করা

আধুনিক ওয়েব অ্যাপ্লিকেশানগুলির সাথে কাজ করার সময়, আপনি একটি পৃষ্ঠা পুনরায় লোড ট্রিগার না করেই URL সংশোধন করার প্রয়োজন হতে পারে৷ এটি একটি বিরামহীন ব্যবহারকারীর অভিজ্ঞতা তৈরি করার জন্য বিশেষভাবে কার্যকর হতে পারে।

এই নির্দেশিকায়, আমরা ডোমেনের পরে URL-এর অংশ পরিবর্তন করার পদ্ধতিগুলি অন্বেষণ করব, সেই কৌশলগুলি সহ যা আপনাকে হ্যাশ (#) চিহ্নের আগে অংশটি অ্যাক্সেস করতে দেয়৷ এটি পছন্দসই URL পরিবর্তন করার সময় ক্রস-ডোমেন নীতিগুলির সাথে সম্মতি নিশ্চিত করে৷

জাভাস্ক্রিপ্টে URL পরিবর্তনের বিস্তারিত ব্যাখ্যা

প্রথম স্ক্রিপ্ট ব্যবহার করে history.pushState() পদ্ধতি, যা ইতিহাস API এর অংশ। এই কমান্ডটি বিকাশকারীদের ব্রাউজারের সেশন ইতিহাস স্ট্যাকে একটি নতুন এন্ট্রি যোগ করার অনুমতি দেয়, কার্যকরভাবে পৃষ্ঠাটি পুনরায় লোড না করেই ঠিকানা বারে প্রদর্শিত URL পরিবর্তন করে৷ স্ক্রিপ্টে, const newURL = "/page2.php"; নতুন পথ সেট করে, এবং history.pushState(null, "", newURL); এই নতুন পাথে URL পরিবর্তন করে। মোড়ানো দ্বারা history.pushState যেমন একটি ফাংশনে কমান্ড function changeURL(newPath), আমরা প্রয়োজন অনুসারে ইউআরএলটি গতিশীলভাবে আপডেট করতে পারি। এই কৌশলটি বিশেষ করে একক-পৃষ্ঠার অ্যাপ্লিকেশনের (এসপিএ) জন্য উপযোগী যেখানে সমগ্র পৃষ্ঠা পুনরায় লোড না করেই বিষয়বস্তু গতিশীলভাবে পরিবর্তিত হয়।

দ্বিতীয় স্ক্রিপ্ট ঠিকানা ব্যবহার করে URL হ্যাশ পরিবর্তন window.location.hash. এই প্রপার্টি ইউআরএলের অ্যাঙ্কর অংশ পায় বা সেট করে যা হ্যাশ চিহ্ন (#) অনুসরণ করে। সেট করে const hashValue = "newSection"; এবং window.location.hash = hashValue;, পৃষ্ঠাটি পুনরায় লোড না করেই URL হ্যাশ #newSection-এ পরিবর্তিত হয়। এই পদ্ধতিটি একই পৃষ্ঠার মধ্যে নেভিগেট করার জন্য বা একটি নথির মধ্যে নির্দিষ্ট বিভাগে লিঙ্ক করার জন্য দরকারী। উপরন্তু, ফাংশন function updateHash(newHash) এই কার্যকারিতাকে এনক্যাপসুলেট করে, ইউআরএলের হ্যাশ অংশকে গতিশীলভাবে পরিবর্তন করা সহজ করে তোলে। উভয় স্ক্রিপ্টই URL সংশোধন করার এবং অপ্রয়োজনীয় পৃষ্ঠা পুনরায় লোড এড়িয়ে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য বিরামহীন উপায় প্রদান করে।

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

পুনরায় লোড না করেই ইউআরএল পরিবর্তন করার জন্য অতিরিক্ত পদ্ধতি অন্বেষণ করা হচ্ছে

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

ব্যবহার করা replaceState(), আপনি অনুরূপ একটি ফাংশন লিখতে পারেন changeURL() কিন্তু পরিবর্তে কল history.replaceState() এটার ভিতরে। এই ক্ষেত্রে, function replaceURL(newPath) ব্যবহার করতে পারে history.replaceState(null, "", newPath); URL আপডেট করতে। এই কৌশলটি অপ্রয়োজনীয় ইতিহাস এন্ট্রি তৈরি না করে ইউআরএলকে অ্যাপ্লিকেশনের অবস্থার সাথে সিঙ্ক করে রেখে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য মূল্যবান। তদ্ব্যতীত, এটি ব্রাউজারের ইতিহাস পরিচালনা করার জন্য একটি আরও কার্যকর উপায় অফার করে, বিশেষ করে গতিশীল ওয়েব অ্যাপ্লিকেশনগুলিতে।