یہ مضمون JavaScript کا استعمال کرتے ہوئے ویب صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کے طریقوں کی وضاحت کرے گا۔
صفحہ کو دوبارہ لوڈ کیے بغیر جاوا اسکرپٹ میں یو آر ایل میں ترمیم/تبدیل کیسے کریں؟
ویب صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کے لیے، درج ذیل JavaScript کا پہلے سے طے شدہ طریقہ استعمال کریں:
طریقہ 1: 'pushState()' طریقہ استعمال کرتے ہوئے صفحہ کو دوبارہ لوڈ کیے بغیر JavaScript میں URL میں ترمیم کریں۔
ویب صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کے لیے، ' pushState() 'طریقہ. یہ ایک خصوصیت یا پہلے سے طے شدہ طریقہ ہے ' تاریخ آبجیکٹ ” جو صفحہ کو نیویگیٹ یا ریفریش کیے بغیر براؤزر کی سرگزشت کو تبدیل کرنے کی اجازت دیتا ہے۔ یہ صرف ہسٹری اسٹیک کو شامل کرتا ہے یا اس میں ترمیم کرتا ہے اور نیا صفحہ لوڈ نہیں کرتا ہے۔ اس نقطہ نظر کو استعمال کرتے ہوئے، آپ براؤزر کے ہسٹری اسٹیک میں ایک نیا اندراج شامل کرکے صفحات کے درمیان آگے پیچھے سوئچ کر سکتے ہیں۔
نحو
'pushState()' طریقہ کے لیے دیے گئے نحو پر عمل کریں:
کھڑکی تاریخ . pushState ( حالت ، عنوان ، یو آر ایل ) ;
یہاں:
- ' حالت ' نئی تاریخ کے اندراج کی نمائندگی کرتا ہے۔
- ' عنوان ” وہ مخصوص متن ہے جسے براؤزر کے ٹائٹل بار میں دکھایا جا سکتا ہے۔
- ' یو آر ایل ' تبدیل شدہ URL کو ایک نئی اندراج کے طور پر ظاہر کرتا ہے۔
مثال
ایک HTML فائل میں، چار بٹن بنائیں جو ' modifyUrl() بٹن پر فنکشن کلک کریں:
< بٹن پر کلک کریں۔ = 'modifyUrl('CSS ٹیوٹوریل', 'CSSTutorial.html');' > 2 بٹن >
< بٹن پر کلک کریں۔ = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 بٹن >
< بٹن پر کلک کریں۔ = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 بٹن >
ایک فنکشن کی وضاحت کریں ' modifyUrl() ایک جاوا اسکرپٹ فائل میں جو بٹن پر کلک کرنے پر متحرک ہو جائے گی۔ یہ دو پیرامیٹرز لیتا ہے، ' عنوان ' اور ' یو آر ایل ' جب طریقہ بٹن پر کلک کیا جائے گا تو 'ٹائٹل' اور 'url' کو بطور دلیل پاس کیا جائے گا۔ کی قسم چیک کریں ' pushState 'تاریخ کے اعتراض کا، اگر یہ نہیں ہے' غیر متعینہ ' پھر، کال کریں ' history.pushState() URL کو تبدیل کرنے کا طریقہ:
فنکشن modifyUrl ( عنوان ، یو آر ایل ) {
اگر ( کی قسم ( تاریخ. pushState ) != 'غیر متعینہ' ) {
تھا اعتراض = {
عنوان : عنوان ،
یو آر ایل : یو آر ایل
} ;
تاریخ. pushState ( اعتراض ، اعتراض عنوان ، اعتراض یو آر ایل ) ;
}
}
یہ دیکھا جا سکتا ہے کہ ہر بٹن پر کلک کرنے پر، صفحہ کو دوبارہ لوڈ کیے بغیر URL کامیابی کے ساتھ تبدیل ہو جائے گا۔
مندرجہ بالا آؤٹ پٹ میں، آپ دیکھ سکتے ہیں کہ اوپر بائیں طرف پچھلے تیر کا بٹن ( <- ) بٹن پر کلک کرنے کے دوران فعال ہوجاتا ہے، یہ اشارہ کرتا ہے کہ آپ آگے پیچھے نیویگیٹ کرسکتے ہیں کیونکہ ' pushState() ” طریقہ ہسٹری اسٹیک پر نیا URL شامل کرتا ہے۔
طریقہ 2: 'replaceState()' طریقہ استعمال کرتے ہوئے صفحہ کو دوبارہ لوڈ کیے بغیر جاوا اسکرپٹ میں URL میں ترمیم کریں۔
کا استعمال کرتے ہیں ' متبادل ریاست() ویب صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کا طریقہ۔ یہ بھی ایک خصوصیت ہے ' تاریخ آبجیکٹ لیکن یہ ہسٹری اسٹیک میں کوئی نئی انٹری شامل نہیں کرے گا۔ یہ براؤزر کی تاریخ کی موجودہ حالت کو تبدیل کرتا ہے اور اسے ایک نئی حالت سے بدل دیتا ہے۔ اس نقطہ نظر کو استعمال کرتے ہوئے، آپ صفحات کے درمیان آگے پیچھے نہیں جا سکتے۔
نحو
دیئے گئے نحو کو 'replaceState()' طریقہ کے لیے استعمال کیا جاتا ہے:
مثال
متعین فنکشن میں، کال کریں ' متبادل ریاست() بٹن پر URL کو تبدیل کرنے کا طریقہ صفحہ کو دوبارہ لوڈ یا نیویگیٹ کیے بغیر کلک کریں:
اگر ( کی قسم ( تاریخ. ریاست کو تبدیل کریں۔ ) != 'غیر متعینہ' ) {
تھا اعتراض = {
عنوان : عنوان ،
یو آر ایل : یو آر ایل
} ;
تاریخ. ریاست کو تبدیل کریں۔ ( اعتراض ، اعتراض عنوان ، اعتراض یو آر ایل ) ;
}
}
آؤٹ پٹ اشارہ کرتا ہے کہ ہر بٹن کے کلک پر، URL کو تبدیل کر دیا گیا ہے اور پیچھے جانے کے لیے نیویگیٹ کرنے کا کوئی آپشن نہیں ہے کیونکہ بیک ایرو بٹن غیر فعال ہے:
ہم نے جاوا اسکرپٹ میں صفحہ کو دوبارہ لوڈ کیے بغیر URL کی ترمیم سے متعلقہ تمام ضروری معلومات فراہم کر دی ہیں۔
نتیجہ
ویب صفحہ کو ریفریش کیے بغیر یو آر ایل میں ترمیم/تبدیل کرنے کے لیے، ' pushState() 'طریقہ یا' متبادل ریاست() 'طریقہ. 'pushState()' طریقہ نئے URL کو ہسٹری اسٹیک میں ایک نئے اندراج کے طور پر شامل کرتا ہے اور صارفین کو آگے پیچھے نیویگیٹ کرنے کی اجازت دیتا ہے۔ جبکہ 'replaceState()' طریقہ یو آر ایل کی جگہ لے لیتا ہے اور بیک پیج پر جانے کی اجازت نہیں دیتا ہے۔ اس مضمون میں JavaScript کا استعمال کرتے ہوئے ویب صفحہ کو دوبارہ لوڈ کیے بغیر URL میں ترمیم کرنے کے طریقے بیان کیے گئے ہیں۔