ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ 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 ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಬಹುದು. ಈ ತಂತ್ರವು ಏಕ-ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ (SPA ಗಳು) ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ಸಂಪೂರ್ಣ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ವಿಷಯವು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಗುತ್ತದೆ.

ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್ ವಿಳಾಸಗಳನ್ನು ಬಳಸಿಕೊಂಡು URL ಹ್ಯಾಶ್ ಅನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ window.location.hash. ಈ ಆಸ್ತಿಯು ಹ್ಯಾಶ್ ಚಿಹ್ನೆಯನ್ನು (#) ಅನುಸರಿಸುವ URL ನ ಆಂಕರ್ ಭಾಗವನ್ನು ಪಡೆಯುತ್ತದೆ ಅಥವಾ ಹೊಂದಿಸುತ್ತದೆ. ಹೊಂದಿಸುವ ಮೂಲಕ const hashValue = "newSection"; ಮತ್ತು window.location.hash = hashValue;, URL ಹ್ಯಾಶ್ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ #newSection ಗೆ ಬದಲಾಗುತ್ತದೆ. ಈ ವಿಧಾನವು ಒಂದೇ ಪುಟದಲ್ಲಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಅಥವಾ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ವಿಭಾಗಗಳಿಗೆ ಲಿಂಕ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಿದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಕಾರ್ಯ function updateHash(newHash) URL ನ ಹ್ಯಾಶ್ ಭಾಗವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸಲು ಸುಲಭವಾಗುವಂತೆ ಈ ಕಾರ್ಯವನ್ನು ಆವರಿಸುತ್ತದೆ. ಎರಡೂ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು 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 ಅನ್ನು ಮಾರ್ಪಡಿಸಲು ಹೆಚ್ಚುವರಿ ವಿಧಾನಗಳನ್ನು ಅನ್ವೇಷಿಸಲಾಗುತ್ತಿದೆ

ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ URL ಅನ್ನು ಮಾರ್ಪಡಿಸುವ ಇನ್ನೊಂದು ಅಂಶವು ಬಳಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ replaceState() ಇತಿಹಾಸ API ನಿಂದ ವಿಧಾನ. ಹಾಗೆಯೇ pushState() ಹೊಸ ಇತಿಹಾಸ ಪ್ರವೇಶವನ್ನು ಸೇರಿಸುತ್ತದೆ, replaceState() ಪ್ರಸ್ತುತ ಇತಿಹಾಸದ ನಮೂದನ್ನು ಮಾರ್ಪಡಿಸುತ್ತದೆ. ಬಹು ರಾಜ್ಯಗಳೊಂದಿಗೆ ಬಳಕೆದಾರರ ಇತಿಹಾಸವನ್ನು ಅಸ್ತವ್ಯಸ್ತಗೊಳಿಸದೆ URL ಅನ್ನು ಬದಲಾಯಿಸಲು ನೀವು ಬಯಸಿದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಒಂದೇ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೊಂದಿದ್ದರೆ ಅಲ್ಲಿ ವಿಷಯವು ಆಗಾಗ್ಗೆ ಬದಲಾಗುತ್ತಿರುತ್ತದೆ, ಇತಿಹಾಸಕ್ಕೆ ಪ್ರತಿ ಬದಲಾವಣೆಯನ್ನು ಸೇರಿಸದೆಯೇ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ನೀವು URL ಅನ್ನು ನವೀಕರಿಸಲು ಬಯಸಬಹುದು. ಇದು ಬ್ಯಾಕ್ ಬಟನ್ ಕಾರ್ಯವನ್ನು ಸ್ವಚ್ಛವಾಗಿ ಮತ್ತು ಬಳಕೆದಾರ ಸ್ನೇಹಿಯಾಗಿರಿಸುತ್ತದೆ.

ಉಪಯೋಗಿಸಲು replaceState(), ನೀವು ಇದೇ ರೀತಿಯ ಕಾರ್ಯವನ್ನು ಬರೆಯಬಹುದು changeURL() ಆದರೆ ಬದಲಿಗೆ ಕರೆ history.replaceState() ಅದರ ಒಳಗೆ. ಉದಾಹರಣೆಗೆ, function replaceURL(newPath) ಬಳಸಿಕೊಳ್ಳಬಹುದು history.replaceState(null, "", newPath); URL ಅನ್ನು ನವೀಕರಿಸಲು. ಅನಗತ್ಯ ಇತಿಹಾಸ ನಮೂದುಗಳನ್ನು ರಚಿಸದೆ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ಥಿತಿಯೊಂದಿಗೆ URL ಅನ್ನು ಸಿಂಕ್‌ನಲ್ಲಿ ಇರಿಸುವ ಮೂಲಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಈ ತಂತ್ರವು ಮೌಲ್ಯಯುತವಾಗಿದೆ. ಇದಲ್ಲದೆ, ಇದು ವಿಶೇಷವಾಗಿ ಡೈನಾಮಿಕ್ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬ್ರೌಸರ್‌ನ ಇತಿಹಾಸವನ್ನು ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ.