מאמר זה יתאר את השיטות לשינוי כתובת האתר מבלי לטעון מחדש את דף האינטרנט באמצעות JavaScript.
כיצד לשנות/לשנות את כתובת האתר ב-JavaScript מבלי לטעון מחדש את הדף?
כדי לשנות את כתובת האתר מבלי לטעון מחדש את דף האינטרנט, השתמש בשיטה המוגדרת מראש של JavaScript הבאה:
שיטה 1: שנה את כתובת האתר ב-JavaScript מבלי לטעון מחדש את הדף באמצעות שיטת 'pushState()'
כדי לשנות את כתובת האתר מבלי לטעון מחדש את דף האינטרנט, השתמש ב-' pushState() ' שיטה. זוהי תכונה או השיטה המוגדרת מראש של ' אובייקט היסטוריה ' המאפשר לשנות את היסטוריית הדפדפן מבלי לנווט או לרענן את הדף. זה רק מוסיף או משנה את ערימת ההיסטוריה ואינו טוען דף חדש. על ידי שימוש בגישה זו, תוכל לעבור הלוך ושוב בין הדפים על ידי הוספת ערך חדש לערימת ההיסטוריה של הדפדפן.
תחביר
בצע את התחביר הנתון עבור שיטת 'pushState()':
חַלוֹן. הִיסטוֹרִיָה . pushState ( מדינה , כותרת , כתובת אתר ) ;
כאן:
- ' מדינה ' מייצג את ערך ההיסטוריה החדש.
- ' כותרת ' הוא הטקסט המסוים שניתן להציג בשורת הכותרת של הדפדפן.
- ' כתובת אתר ' מציין את כתובת האתר שהוחלפה כערך חדש.
דוגמא
בקובץ HTML, צור ארבעה כפתורים הקוראים ל' modifyUrl() ' פונקציה בלחיצת הכפתור:
< כפתור בלחיצה = 'modifyUrl('CSS Tutorial', 'CSSTutorial.html');' > 2 לַחְצָן >
< כפתור בלחיצה = 'modifyUrl('JavaScript Tutorial', 'JavaScriptTutorial.html');' > 3 לַחְצָן >
< כפתור בלחיצה = 'modifyUrl('Java Tutorial', 'JavaTutorial.html');' > 4 לַחְצָן >
הגדר פונקציה ' modifyUrl() ” בקובץ JavaScript שיפעיל בלחיצת הכפתור. זה דורש שני פרמטרים, ' כותרת ' וה ' כתובת אתר '. כאשר השיטה נקראת בלחיצה על הכפתור, ה'כותרת' וה-URL יעברו כארגומנטים. בדוק את סוג ה' pushState ' של אובייקט ההיסטוריה, אם הוא לא ' לא מוגדר '. לאחר מכן, התקשר ל' history.pushState() ' שיטה לשינוי כתובת האתר:
פוּנקצִיָה modifyUrl ( כותרת , כתובת אתר ) {
אם ( סוג של ( הִיסטוֹרִיָה. pushState ) != 'לא מוגדר' ) {
היה obj = {
כותרת : כותרת ,
כתובת אתר : כתובת אתר
} ;
הִיסטוֹרִיָה. pushState ( obj , obj. כותרת , obj. כתובת אתר ) ;
}
}
ניתן לראות שבכל לחיצה על כפתור, כתובת האתר תשתנה בהצלחה מבלי לטעון מחדש את העמוד:
בפלט לעיל, אתה יכול לראות שכפתור החץ לאחור בצד שמאל למעלה ( <- ) מופעלת תוך כדי לחיצה על הכפתור, זה מציין שאתה יכול לנווט קדימה ואחורה כי ' pushState() השיטה מוסיפה את כתובת האתר החדשה בערימת ההיסטוריה.
שיטה 2: שנה את כתובת האתר ב-JavaScript מבלי לטעון מחדש את הדף באמצעות שיטת 'replaceState()'
להשתמש ב ' replaceState() ' שיטה לשינוי כתובת האתר מבלי לטעון מחדש את דף האינטרנט. זה גם מאפיין של ' אובייקט היסטוריה אבל זה לא יוסיף ערך חדש לערימת ההיסטוריה. זה משנה את המצב הקיים של ההיסטוריה של הדפדפן ומחליף אותו במצב חדש. על ידי שימוש בגישה זו, אינך יכול לעבור הלוך ושוב בין הדפים.
תחביר
התחביר הנתון משמש עבור שיטת 'replaceState()':
דוגמא
בפונקציה המוגדרת, קרא את ' replaceState() ' שיטה להחלפת כתובת האתר בלחיצה על הכפתור מבלי לטעון מחדש או לנווט בדף:
אם ( סוג של ( הִיסטוֹרִיָה. replaceState ) != 'לא מוגדר' ) {
היה obj = {
כותרת : כותרת ,
כתובת אתר : כתובת אתר
} ;
הִיסטוֹרִיָה. replaceState ( obj , obj. כותרת , obj. כתובת אתר ) ;
}
}
הפלט מציין שבכל לחיצה של כפתור, כתובת האתר שונתה ואין אפשרות לנווט כדי לחזור אחורה מכיוון שכפתור החץ לאחור מושבת:
סיפקנו את כל המידע החיוני הרלוונטי לשינוי כתובת האתר מבלי לטעון מחדש את הדף ב-JavaScript.
סיכום
כדי לשנות/לשנות את כתובת האתר מבלי לרענן את דף האינטרנט, השתמש ב' pushState() שיטת ' או ה' replaceState() ' שיטה. שיטת 'pushState()' מוסיפה את כתובת האתר החדשה כערך חדש בערימת היסטוריה ומאפשרת למשתמשים לנווט קדימה ואחורה. בעוד ששיטת 'replaceState()' מחליפה את כתובת האתר ואינה מאפשרת מעבר לעמוד האחורי. מאמר זה תיאר את השיטות לשינוי כתובת האתר מבלי לטעון מחדש את דף האינטרנט באמצעות JavaScript.