window.location ভ্যালু আপনার ব্রাউজারে আপনি যে বর্তমান URL দেখছেন সেটাকে উপস্থাপন করে। জাভাস্ক্রিপ্টে এই ভ্যালুটিকে রিপ্লেস করে আপনি অন্য একটি URL-এ যেতে পারেন। এটি উপযোগী যদি আপনি একজন ব্যবহারকারীকে অন্য একটি পৃষ্ঠায় রিডাইরেক্ট করতে চান। আপনি assign() বা replace() মেথডগুলোও ব্যবহার করতে পারেন।
একজন ব্যবহারকারীকে অন্য একটি ওয়েবসাইট বা একটি আপডেটেড পাথনেমে রিডাইরেক্ট করার জন্য কিছু কারণ থাকতে পারে। অধিকাংশ কেসে, আপনি ব্যবহারকারীর authorization (অথরাইজেশন) — অর্থাৎ ক্লায়েন্ট সাইটে লগইন করেছে কিনা — তার উপর ভিত্তি করে রিডাইরেক্ট করতে চান। এই আর্টিকেলে, আমরা জাভাস্ক্রিপ্ট ব্যবহার করে একটি ওয়েব পৃষ্ঠায় এটি কীভাবে করা যায় সেটা দেখব।
JavaScript Go to URL
জাভাস্ক্রিপ্ট ব্রাউজার হিস্টরি API আপনাকে একটি নতুন URL-এ যেতে দেয়। একটি নতুন URL-এ নেভিগেট করার জন্য আপনি নিচের মেথডগুলো ব্যবহার করতে পারেন:
- window.location-এ একটি নতুন ভ্যালু অ্যাসাইন করা।
- window.assign() মেথড ব্যবহার করা।
- window.replace() মেথড ব্যবহার করা।
এই তিনটি মেথড সবই অন্য একটি URL-এ নেভিগেট করার লক্ষ্য সমানভাবে পুরা করে। আসুন প্রতিটি মেথডটি দেখি।
JavaScript window.location ভ্যালু
একটি নতুন URL-এ নেভিগেট করতে, ব্রাউজারের History API-র location object ব্যবহার করুন। সেশন হিস্ট্রি আপনাকে location object-কে একটি নতুন URL-এ রি-অ্যাসাইন করতে বা সেই অবজেক্টের href প্রপার্টি ব্যবহার করতে দেয়।
এই পদ্ধতির সিনট্যাক্স:
window.location = "url";
"url" উপস্থাপন করে যে URL-এ আপনি ব্যবহারকারীকে পাঠাতে চান। যখন এই লাইন কোডটি রান করে, একটি জাভাস্ক্রিপ্ট রিডাইরেক্ট শুরু হয়। এটি ব্যবহারকারীর ব্রাউজারে যে পৃষ্ঠা দেখছেন সেটাকে পরিবর্তন করে।
এই মেথডটি একটি উদাহরণ হিসেবে দেখি:
const handleClick = (e) => {
console.log("click")
window.location = ('https://careerkarma.com')
// window.location.href = ('https://careerkarma.com')
console.log(window.location)
}
handleClick() ফাংশন রান করলে, আমাদের কোড জাভাস্ক্রিপ্ট কনসোলে একটি স্টেটমেন্ট লগ করবে। তারপর, আমাদের কোড আমাদেরকে একটি নতুন URL-এ রিডাইরেক্ট করবে।
JavaScript window.location.assign()
Location object-এ একটি রিডাইরেক্ট মেথড আছে যাকে assign() বলা হয়। এই মেথডটি করেন্ট URL কে অ্যাসাইন করা URL-এ অ্যাসাইন করে এবং ইটিকে হিস্টরি স্টকে যোগ করে।
হিস্টরি স্টেক (history stack) উপস্থাপন করে আপনি যে পৃষ্ঠাগুলো দেখেছেন (ব্যাক অ্যারো (back arrow) যা আপনাকে এক পেজ পিছনে যেতে দেয় সেটা ভাবুন)।
নিচের সিনট্যাক্স বিবেচনা করুন:
window.location.assign("url");
গত উদাহরণের বিপরীতে, আমাদের একটি জাভাস্ক্রিপ্ট ভেরিয়েবলে (window.location) কোনো ভ্যালু অ্যাসাইন করতে হবে না। বরং, আমরা একটি মেথড ব্যবহার করি ব্যবহারকারীর যে ওয়েব পৃষ্ঠা দেখছে সেটা পরিবর্তন করতে।
হিস্টরি স্টেক হলো ব্রাউজার কীভাবে মনে রাখে একটি ব্যাক বাটন বা ফরওয়ার্ড বাটন কোথায় যাবে।
এই মেথডটির একটি ফুল উদাহরণ দেখি:
const handleClick = (e) => {
console.log("click")
window.location.assign('https://careerkarma.com');
}
আপনি যদি একই সাইটের একটি ভিন্ন পৃষ্ঠায় রিডাইরেক্ট করতে চান, তবে location object-এ pathname প্রপার্টি ব্যবহার করুন:
const handleClick = (e) => {
console.log("click")
window.location.pathname = ('/newpage.html')
console.log(window.location)
}
JavaScript window.location.replace()
আপনার কাছে ক্ষমতা আছে নিয়ন্ত্রণ করতে যে ব্যবহারকারী ব্যাক বাটন ব্যবহার করে পূর্বের সাইটে ফিরে যেতে পারবেন কিনা।
replace() মেথড ব্যবহার করে, আপনি একজন ব্যবহারকারীকে একটি সাইটে নেভিগেট করতে পারেন এবং তাদের পূর্বের পেজে ফিরে যাওয়া বন্ধ করতে পারেন। assign() মেথডটি, অন্যদিকে, আপনি আগে যে পৃষ্ঠা দেখেছিলেন সেটাকে আপনার ব্রাউজার হিস্টরিতে সংরক্ষণ করে। তাই, assign()-এর সাথে আপনি আপনি যা শেষে দেখেছিলেন সেটা দেখতে পারেন।
replace() মেথডটি দেখি:
window.location.replace("url");
assign()-এর মতো, replace() একটি মেথড। এই মেথডটি একটি আর্গুমেন্ট নেয়: যে URL-এ আপনি ব্যবহারকারীকে পয়েন্ট করতে চান।
আমরা replace() মেথডটি একটি কাস্টোম ফাংশনের সাথে ব্যবহার করতে পারি ব্যবহারকারী যে URL দেখছে সেটা পরিবর্তন করতে যখন মেথডটি রান করে:
const handleClick = (e) => {
console.log("click")
window.location.replace('https://careerkarma.com');
}
এই Repl.it ব্যবহার করে আপনার পছন্দের URL-এ রিডাইরেক্ট করার জন্য বিভিন্ন মেথড নিয়ে এক্সপেরিমেন্ট করুন। কোডটি ডিফল্টে রিসেট করতে Run বাটন ব্যবহার করুন।
উপসংহার
জাভাস্ক্রিপ্টে URL-এ যাওয়ার তিনটি উপায় আছে: window.location ব্যবহার করা, window.location.assign() মেথড ব্যবহার করা, বা window.location.replace() মেথড ব্যবহার করা।
আপনি কি জাভাস্ক্রিপ্ট সম্পর্কে আরও জানতে চান? আমাদের How to Learn JavaScript গাইড চেক আউট করুন। এই গাইডে জাভাস্ক্রিপ্ট শিখতে টপ টিপস এবং শুরুকারী ও মধ্যবিত্ত ডেভেলপারদের জন্য ব্যাপক লার্নিং রিসোর্সের তালিকা আছে।
