جاوا اسکرپٹ کے ساتھ یو آر ایل کو متحرک طور پر تبدیل کرنا
جدید ویب ایپلیکیشنز کے ساتھ کام کرتے وقت، آپ کو صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کی ضرورت محسوس ہو سکتی ہے۔ یہ خاص طور پر ایک ہموار صارف کا تجربہ بنانے کے لیے مفید ہو سکتا ہے۔
اس گائیڈ میں، ہم ڈومین کے بعد URL کے حصے کو تبدیل کرنے کے طریقے تلاش کریں گے، بشمول وہ تکنیک جو آپ کو ہیش (#) علامت سے پہلے والے حصے تک رسائی کی اجازت دیتی ہیں۔ یہ مطلوبہ URL ترمیم کو حاصل کرتے ہوئے کراس ڈومین پالیسیوں کی تعمیل کو یقینی بناتا ہے۔
| کمانڈ | تفصیل |
|---|---|
| history.pushState() | صفحہ کو دوبارہ لوڈ کیے بغیر یو آر ایل کو تبدیل کرتے ہوئے، براؤزر کے سیشن ہسٹری اسٹیک میں ایک نیا اندراج شامل کرتا ہے۔ |
| window.history.pushState() | موجودہ تاریخ کے اندراج کو نئے ریاستی ڈیٹا اور ایک نئے URL کے ساتھ اپ ڈیٹ کرتا ہے۔ |
| window.location.hash | URL کا اینکر حصہ حاصل کرتا ہے یا سیٹ کرتا ہے، جو ہیش کی علامت (#) کی پیروی کرتا ہے۔ |
| function changeURL(newPath) | ایک فنکشن کی وضاحت کرتا ہے جو ہسٹری API کا استعمال کرتے ہوئے URL پاتھ کو اپ ڈیٹ کرتا ہے۔ |
| function updateHash(newHash) | ایک فنکشن کی وضاحت کرتا ہے جو URL ہیش کو اپ ڈیٹ کرتا ہے۔ |
جاوا اسکرپٹ میں یو آر ایل میں ترمیم کی تفصیلی وضاحت
پہلا اسکرپٹ استعمال کرتا ہے۔ history.pushState() طریقہ، جو ہسٹری API کا حصہ ہے۔ یہ کمانڈ ڈویلپرز کو براؤزر کے سیشن ہسٹری اسٹیک میں ایک نئی انٹری شامل کرنے کی اجازت دیتی ہے، صفحہ کو دوبارہ لوڈ کیے بغیر ایڈریس بار میں دکھائے گئے URL کو مؤثر طریقے سے تبدیل کر دیتا ہے۔ اسکرپٹ میں، const newURL = "/page2.php"; نیا راستہ طے کرتا ہے، اور history.pushState(null, "", newURL); URL کو اس نئے راستے میں تبدیل کرتا ہے۔ لپیٹ کر history.pushState جیسے فنکشن میں کمانڈ function changeURL(newPath)، ہم ضرورت کے مطابق یو آر ایل کو متحرک طور پر اپ ڈیٹ کر سکتے ہیں۔ یہ تکنیک خاص طور پر سنگل پیج ایپلیکیشنز (SPAs) کے لیے مفید ہے جہاں پورے صفحے کو دوبارہ لوڈ کیے بغیر مواد متحرک طور پر تبدیل ہو جاتا ہے۔
دوسرا اسکرپٹ ایڈریس کا استعمال کرتے ہوئے URL ہیش کو تبدیل کرتا ہے۔ window.location.hash. یہ خاصیت URL کا اینکر حصہ حاصل کرتی ہے یا سیٹ کرتی ہے جو ہیش کی علامت (#) کی پیروی کرتا ہے۔ ترتیب سے const hashValue = "newSection"; اور window.location.hash = hashValue;, URL ہیش صفحہ کو دوبارہ لوڈ کیے بغیر #newSection میں بدل جاتا ہے۔ یہ نقطہ نظر ایک ہی صفحہ میں نیویگیٹ کرنے یا کسی دستاویز کے اندر مخصوص حصوں سے منسلک کرنے کے لیے مفید ہے۔ اس کے علاوہ، فنکشن function updateHash(newHash) اس فعالیت کو سمیٹتا ہے، جس سے URL کے ہیش حصے کو متحرک طور پر تبدیل کرنا آسان ہو جاتا ہے۔ دونوں اسکرپٹ URL میں ترمیم کرنے اور صفحہ کے غیر ضروری دوبارہ لوڈ سے گریز کرکے صارف کے تجربے کو بہتر بنانے کے بغیر کسی رکاوٹ کے طریقے فراہم کرتے ہیں۔
دوبارہ لوڈ کیے بغیر URL کو تبدیل کرنے کے لیے ہسٹری API کا استعمال کرنا
ہسٹری API کے ساتھ جاوا اسکرپٹ
const newURL = "/page2.php";history.pushState(null, "", newURL);// This changes the URL to /page2.php without reloading the pagefunction changeURL(newPath) {window.history.pushState({}, "", newPath);}// Example usagechangeURL("/page2.php");
دوبارہ لوڈ کیے بغیر یو آر ایل ہیش کو جوڑنا
ہیش میں ترمیم کرنے کے لیے جاوا اسکرپٹ
const hashValue = "newSection";window.location.hash = hashValue;// This changes the URL hash to #newSectionfunction updateHash(newHash) {window.location.hash = newHash;}// Example usageupdateHash("newSection");
دوبارہ لوڈ کیے بغیر یو آر ایل میں ترمیم کرنے کے اضافی طریقے تلاش کرنا
صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کا ایک اور پہلو استعمال کرنا شامل ہے۔ replaceState() تاریخ API سے طریقہ۔ جبکہ pushState() تاریخ کا ایک نیا اندراج شامل کرتا ہے، replaceState() موجودہ تاریخ کے اندراج میں ترمیم کرتا ہے۔ یہ خاص طور پر مفید ہو سکتا ہے جب آپ متعدد ریاستوں کے ساتھ صارف کی تاریخ کو بے ترتیبی کے بغیر URL کو تبدیل کرنا چاہتے ہیں۔ مثال کے طور پر، اگر آپ کے پاس ایک صفحے کی ایپلی کیشن ہے جہاں مواد اکثر تبدیل ہوتا رہتا ہے، تو آپ تاریخ میں ہر تبدیلی کو شامل کیے بغیر موجودہ حالت کو ظاہر کرنے کے لیے URL کو اپ ڈیٹ کرنا چاہیں گے۔ یہ بیک بٹن کی فعالیت کو صاف اور صارف دوست رکھتا ہے۔
استمال کے لیے replaceState()، آپ اس سے ملتا جلتا فنکشن لکھ سکتے ہیں۔ changeURL() لیکن اس کے بجائے کال کریں history.replaceState() اس کے اندر۔ مثال کے طور پر، function replaceURL(newPath) استعمال کر سکتے ہیں history.replaceState(null, "", newPath); URL کو اپ ڈیٹ کرنے کے لیے۔ یہ تکنیک غیر ضروری تاریخ کے اندراجات بنائے بغیر یو آر ایل کو ایپلیکیشن کی حالت کے ساتھ مطابقت پذیر رکھ کر صارف کے تجربے کو بہتر بنانے کے لیے قابل قدر ہے۔ مزید برآں، یہ براؤزر کی سرگزشت کو منظم کرنے کا ایک زیادہ موثر طریقہ پیش کرتا ہے، خاص طور پر متحرک ویب ایپلیکیشنز میں۔
دوبارہ لوڈ کیے بغیر URLs میں ترمیم کرنے کے بارے میں عام سوالات
- ان کے درمیان فرق کیا ھے pushState() اور replaceState()?
- pushState() سیشن کی تاریخ کے اسٹیک میں ایک نیا اندراج شامل کرتا ہے، جبکہ replaceState() موجودہ تاریخ کے اندراج میں ترمیم کرتا ہے۔
- کیا میں صفحہ کو دوبارہ لوڈ کیے بغیر URL ہیش کو تبدیل کر سکتا ہوں؟
- جی ہاں، استعمال کرتے ہوئے window.location.hash، آپ صفحہ کو دوبارہ لوڈ کیے بغیر URL ہیش کو تبدیل کر سکتے ہیں۔
- کیا URL کے صرف استفسار کے پیرامیٹرز میں ترمیم کرنا ممکن ہے؟
- ہاں، آپ استفسار کے پیرامیٹرز کو استعمال کر کے اپ ڈیٹ کر سکتے ہیں۔ pushState() یا replaceState() صفحہ کو دوبارہ لوڈ کیے بغیر طریقے۔
- کے ساتھ یو آر ایل میں ترمیم کرتا ہے۔ pushState() واپس بٹن کو متاثر؟
- جی ہاں، ہر کال پر pushState() ایک نئی ہسٹری کا اندراج بناتا ہے، اس لیے بیک بٹن ان ریاستوں میں تشریف لے جائے گا۔
- کیا میں ان طریقوں کو تمام براؤزرز میں استعمال کر سکتا ہوں؟
- زیادہ تر جدید براؤزرز ہسٹری API کو سپورٹ کرتے ہیں، بشمول pushState() اور replaceState()، لیکن ہمیشہ مطابقت کی جانچ کریں۔
- استعمال کرتے وقت میں پاپ اسٹیٹ ایونٹس کو کیسے ہینڈل کروں pushState()?
- آپ سن سکتے ہیں۔ popstate فعال تاریخ کے اندراج میں تبدیلیوں کو سنبھالنے اور اس کے مطابق UI کو اپ ڈیٹ کرنے کے لیے ایونٹ۔
- اگر یو آر ایل فارمیٹ استعمال کرتے وقت غلط ہو تو کیا ہوتا ہے۔ pushState()?
- اگر URL فارمیٹ غلط ہے، pushState() غلطی پھینک دے گا، اس لیے یقینی بنائیں کہ آپ کے یو آر ایل درست طریقے سے فارمیٹ کیے گئے ہیں۔
موضوع کو لپیٹنا
JavaScript میں صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنا ہموار نیویگیشن بنا کر اور صفحہ کے غیر ضروری دوبارہ لوڈ سے بچنے کے ذریعے صارف کے تجربے کو بہت بہتر بنا سکتا ہے۔ ہسٹری API کا استعمال کرنا pushState() اور replaceState() طریقوں سے ڈویلپرز کو یو آر ایل کو متحرک طور پر اپ ڈیٹ کرنے کی اجازت دیتا ہے، براؤزر کی سرگزشت کو بے ترتیبی کے بغیر ایپلی کیشن کی حالت کو ہم آہنگی میں رکھتا ہے۔ مزید برآں، URL ہیش میں ہیرا پھیری کرنے سے صفحہ میں موثر نیویگیشن مل سکتی ہے۔ ان تکنیکوں کو سمجھنا اور ان پر عمل درآمد جدید، ذمہ دار ویب ایپلیکیشنز تیار کرنے کے لیے ضروری ہے۔