ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ JavaScript ਵਿੱਚ URL ਨੂੰ ਸੋਧਣਾ

JavaScript ਨਾਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ URL ਨੂੰ ਬਦਲਣਾ

ਆਧੁਨਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇੱਕ ਪੰਨਾ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ URL ਨੂੰ ਸੋਧਣ ਦੀ ਲੋੜ ਮਹਿਸੂਸ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਇੱਕ ਸਹਿਜ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਬਣਾਉਣ ਲਈ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ।

ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ ਡੋਮੇਨ ਤੋਂ ਬਾਅਦ URL ਦੇ ਹਿੱਸੇ ਨੂੰ ਬਦਲਣ ਦੇ ਢੰਗਾਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ, ਜਿਸ ਵਿੱਚ ਤਕਨੀਕਾਂ ਸ਼ਾਮਲ ਹਨ ਜੋ ਤੁਹਾਨੂੰ ਹੈਸ਼ (#) ਚਿੰਨ੍ਹ ਤੋਂ ਪਹਿਲਾਂ ਵਾਲੇ ਹਿੱਸੇ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ। ਇਹ ਲੋੜੀਂਦੇ URL ਸੋਧ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋਏ ਕਰਾਸ-ਡੋਮੇਨ ਨੀਤੀਆਂ ਦੀ ਪਾਲਣਾ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।

JavaScript ਵਿੱਚ URL ਸੋਧ ਦੀ ਵਿਸਤ੍ਰਿਤ ਵਿਆਖਿਆ

ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ history.pushState() ਵਿਧੀ, ਜੋ ਇਤਿਹਾਸ API ਦਾ ਹਿੱਸਾ ਹੈ। ਇਹ ਕਮਾਂਡ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੈਸ਼ਨ ਇਤਿਹਾਸ ਸਟੈਕ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਐਂਟਰੀ ਜੋੜਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਐਡਰੈੱਸ ਬਾਰ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ URL ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਬਦਲਦਾ ਹੈ। ਸਕ੍ਰਿਪਟ ਵਿੱਚ, const newURL = "/page2.php"; ਨਵਾਂ ਮਾਰਗ ਸੈੱਟ ਕਰਦਾ ਹੈ, ਅਤੇ history.pushState(null, "", newURL); URL ਨੂੰ ਇਸ ਨਵੇਂ ਮਾਰਗ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਲਪੇਟ ਕੇ history.pushState ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਕਮਾਂਡ function changeURL(newPath), ਅਸੀਂ ਲੋੜ ਅਨੁਸਾਰ URL ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰ ਸਕਦੇ ਹਾਂ। ਇਹ ਤਕਨੀਕ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨਾਂ (SPAs) ਲਈ ਉਪਯੋਗੀ ਹੈ ਜਿੱਥੇ ਸਮਗਰੀ ਪੂਰੇ ਪੰਨੇ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਦਲਦੀ ਹੈ।

ਦੂਜੀ ਸਕ੍ਰਿਪਟ 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 ਨੂੰ ਅੱਪਡੇਟ ਕਰਨ ਲਈ। ਇਹ ਤਕਨੀਕ ਬੇਲੋੜੀ ਇਤਿਹਾਸ ਐਂਟਰੀਆਂ ਬਣਾਏ ਬਿਨਾਂ ਯੂਆਰਐਲ ਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਸਥਿਤੀ ਨਾਲ ਸਮਕਾਲੀ ਰੱਖ ਕੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ ਕੀਮਤੀ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਹ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਇਤਿਹਾਸ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਦਾ ਇੱਕ ਵਧੇਰੇ ਕੁਸ਼ਲ ਤਰੀਕਾ ਪੇਸ਼ ਕਰਦਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ ਡਾਇਨਾਮਿਕ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ।