Introduction to JavaScript Location Object
किसी URL से जुड़ी जरुरी information जैसे की protocol, port और hostname आदि की जानकारी प्राप्त करने के लिए JavaScript आपको window.location object provide करती है।



इस object से आप current URL भी प्राप्त कर सकते है। साथ ही इस object से browser को new page पर भी redirect किया जाता है।

Location object को window object द्वारा access किया जाता है। इसका general syntax निचे दिया जा रहा है।



window.location.property/method

इसे आप बिना window object के भी use कर सकते है। 

location.property/method

Location object के साथ 9 properties available है। 
  • href - returns current URL
  • hostname - returns hostname of current page
  • pathname - returns pathname of current page
  • protocol - returns protocol used for current page
  • port - returns current port used for current page
  • hash - returns anchor part of a URL
  • host - returns hostname and port name of a URL
  • origin - returns protocol, hostname and port number all together  
  • search - Returns query part of a URL

Location object के साथ 3 methods भी available है। 
  • assign() - redirects browser to a new URL
  • reload() - reloads current document 
  • replace() - replace current page with new page 

इन्हीं properties और method के द्वारा आप जरुरी information access करते है। इन properties और method के बारे में निचे detail से दिया जा रहा है। 


Location Object Properties 


href 

Window location object की href property द्वारा आप webpage का current URL प्राप्त कर सकते है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



var CurURL = window.location.href;



document.write("Current URL is : "+CurURL);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

http://www.besthinditutorials.com/ 

hostname

JavaScript में window.location.hostname property current page का hostname return करती है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



var hostName = window.location.hostname;



document.write("Host Name is : "+hostName);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

www.besthinditutorials.com 

pathname

JavaScript में window.location.pathname property द्वारा current page का pathname return किया जाता है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



document.write(window.location.pathname);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

/about.html

protocol

यह property उस protocol का नाम return करती है जिसे current page को show करने के लिए use किया गया है। इसका उदाहरण निचे दिया जा रहा है।

<html>

<script type="text/javascript">



var protocolName = window.location.protocol;



document.write(Protocol is "+protocolName);



</script>

</html>


ऊपर दी गयी script निचे दिया गया output generate करती है।

Protocol is https:

port

यह property current URL का port number return करती है। यदि port number default (80) है तो कुछ भी return नहीं किया जाता है। अन्य port number होने पर उसकी value return की जाती है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



var portName = window.location.port;



document.write("Port is : "+portName);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

Port is : 

hash

यह property किसी URL का anchor part return और set करने के लिए use की जाती है। Result # के साथ return किया जाता है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



window.location.hash = "part";



var a Part = window.location.hash;



document.write("Anchor part is : "+aPart);



</script>

</html> 

ऊपर दी गयी script निचे दिया गया output generate करती है।

Anchor part is : #part

host 

यह property host name और port number को एक साथ return करती है। Default port number होने पर कोई भी value नहीं return की जाती है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



document.write(window.location.host);



</script>

</html>


ऊपर दी गयी script निचे दिया गया output generate करती है।

www.besthinditutorials.com

origin

यह property URL से related protocol, hostname और port number एक साथ return करती है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



var result = window.location.origin;



document.write(result);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

https://www.besthinditutorials.com

search

इस property द्वारा URL का query string part return किया जाता है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<script type="text/javascript">



var res = window.location.search;



document.write(res);



</script>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

?javascript=syntax

Location Object Methods



assign()

यह method define किये गए URL को नए document में load करता है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<body>



<button onclick="myFunction()">Click Here</button>



<script type="text/javascript">

function myFunction()

{

    window.location.assign("https://www.google.com");

}

</script>



</body>

</html>

ऊपर दी गयी script define किये गए URL के साथ नया document load करती है।



reload()

ये method current document को reload करता है। इसका उदाहरण निचे दिया जा रहा है। 

<html>

<body>



<button onclick="myFunction()">Reload</button>



<script type="text/javascript">

window.location.reload();

</script>



</body>

</html>


ऊपर दी गयी script में button click होने पर current document reload हो जाता है।



replace()

यह method assign() की तरह ही नया document load करता है। लेकिन इस method के use से old document की history delete हो जाती है। इसका उदाहरण निचे दिया जा रहा है।

<html>

<body>



<button onclick="myFunction()">Replace</button>



<script type="textjavascript">



function myFunction()

{

   window.location.replace("https://www.google.com");

}



</script>



</body>

</html>

ऊपर दी गयी script में button के click होने पर current document नए document द्वारा replace कर दिया जाता है।