JavaScript location Object – Access Browser’s Addressbar

location Object, BOM का एक और बहुत ही महत्वपूर्ण Object है, जो हमें Web Browser के window Object में Currently Loaded Web Page से संबंधित बहुत सारी महत्वपूर्ण Information व Navigation Functionality Provide करता है। location Object की विभिन्न Properties व Methods को हम Firebug द्वारा निम्नानुसार console.dir(location); Statement द्वारा Display कर सकते हैं:

location Object इसलिए भी Special व Unique Object है क्योंकि ये window व document दोनों Object की Property है। यानी हम इसे Point करने के लिए window.location भी लिख सकते हैं और document.location भी लिख सकते हैं।

जैसाकि उपरोक्त चित्र में हम देख सकते हैं कि इस Object की विभिन्न Properties में Currently Loaded Web Page से संबंधित विभिन्न प्रकार की Special Information हैं, जिन्हें हम हमारी जरूरत के अनुसार अपने Web Page में उपयोग में ले सकते हैं। location Object की विभिन्न Properties को हम निम्नानुसार समझ सकते हैं:

hash Property

Currently Loaded Web Page के URL में यदि कोई #String हो, तो वह String इस Property में Store होती है। ये एक प्रकार का On-Page Anchor होता है। यानी जब हम कोई ऐसा Hyperlink Create करते हैं, जिसे Click करने पर हम उसी Page के किसी अन्‍य हिस्से पर पहुंच जाते हैं, तो उस अन्‍य हिस्से की Position को Identify करने के लिए किसी Element के id Attribute में हम जो String Specify करते हैं, वही String hash Property में Store होती है।

उदाहरण के लिए User जब https://www.bccfalna.com/index.html#CProgramming URL पर Click करता है, तो वह index.html Page के उस Element पर पहुंचता है, जिसके id Attribute में Value के रूप में “#CProgramming” String को Value के रूप में Specify किया गया है।

>>> location.hash
//Output: #CProgramming

host Property

इस Property में Currently Loaded Web Page के Host का नाम व यदि उपलब्ध हो, तो Port Number भी Stored रहता है। जैसे:

>>> location.host
//Output: <a href="http://www.google.co.in/">www.google.co.in
</a>//Output: www.google.com:8080

hostname Property

इस Property में Currently Loaded Web Page के Host का नाम बिना Port Number के Stored रहता है। जैसे:

>>> location.hostname 
//Output: <a href="http://www.google.co.in/">www.google.co.in</a>

pathname Property

इस Property में Currently Loaded Web Page का Path Stored रहता है। यदि Web Browser में केवल Root Level Domain को Specify किया गया हो, तो इस Property में “/” Stored रहता है। जैसे:

>>> location.pathname
//Output: <a href="http://www.google.co.in/">www.google.co.in</a>
//Output: www.google.com:8080

port Property

इस Property में Currently Loaded Web Page के URL का केवल Port Number Stored रहता है। यदि ULR के साथ कोई Port Number Specified न हो, तो ये Empty String को Hold करता है। जैसे:

>>> location.port 
//Output: <a href="http://www.google.co.in/">“”</a> 
//Output: “8080”

protocol Property

इस Property में Currently Loaded Web Page को Web Browser में Load करने के लिए Use होने वाले Protocol की जानकारी होती है। सामान्‍यत: इसमें “http:” या “https:” ही Stored रहता है। जैसे:

>>> location.protocol
//Output: https

search Property

इस Property में Currently Loaded Web Page के साथ यदि कोई Query String हो, तो वह Query String Store होती है। Query String हमेंशा “?” Mark के बाद का URL होता है और Query String URL तब बनता है, जब हम HTML Form से किसी Data को Web Server पर Process होने के लिए GET Method का प्रयोग करते हुए SEND करते हैं। जैसे:

>>> location.search
//Output: ?name=Kuldeep&age=31

assign() Method

location Object का प्रयोग करके हम कई तरीकों से Web Browser की Location को Change कर सकते हैं। यानी location Object में हम जो भी URL Specify कर देते हैं, Web Browser उसी URL के Resource को Web Browser के window Object में Load करने लगता है। location Object में किसी Location को Set करने के लिए हम JavaScript के assign() Method को निम्नानुसार Use कर सकते हैं:

>>> location.assign('<a href="https://www.bccfalna.com/">https://www.bccfalna.com/</a>');

जैसे ही ये Statement Execute होता है, Web Browser में वह Web Server Load होने लगता है, जिसे हमने assign() Method में Argument के रूप में Specify किया है। यदि हम चाहें, तो निम्न Statements द्वारा सीधे ही Web Browser में नया Web Page Load कर सकते हैं:

>>> window.location = “<a href="https://www.bccfalna.com/">https://www.bccfalna.com/</a>”; 
>>> window.href = “<a href="https://www.bccfalna.com/">https://www.bccfalna.com/</a>”;

यदि हम उपरोक्त दोनों में से किसी भी JavaScript Statement को Interpret करें, तो ये दोनों Statements Internally location Object के assign() Method को Call करते हैं और Web Browser के window Object में https://www.bccfalna.com/ Web Page को Load कर देते हैं और जैसे ही नया Web Page, Current Web Browser के window Object में Load होता है, location Object की विभिन्न Properties (hash, search, host, pathname, port, etc…) नए URL की विभिन्न Values से Fill हो जाती हैं।

location Object की hash Property के अलावा यदि कोई भी अन्‍य Property की Value Change होती है, तो Web Browser का Web Page को फिर से Reload करता है।

replace() Method

उपरोक्त में से किसी भी तरीके को Use करके यदि location Object के URL में किसी भी तरह का Change किया जाता है, तो BOM के history Object में उस URL की एक Entry हो जाती है। ताकि जरूरत होने पर User Web Browser के Back Button को Click करके फिर से पिछले Page पर जा सके।

लेकिन यदि हम चाहें, तो BOM के इस Default Behavior को location Object के replace() Method का प्रयोग करके Change कर सकते हैं। ये Method उस URL को Argument के रूप में Accept करता है, जिसे Web Browser के window Object में Load करना है, लेकिन history Object में किसी प्रकार की कोई Entry नहीं करता।

replace() Method को Call करने के बाद हम Web Browser के Back Button को Use करके पिछले URL पर फिर से नहीं जा सकते। इस Functionality को हम Firebug Console में निम्न Statement Run करके Check कर सकते हैं:

>>> window.replace('<a href="https://www.bccfalna.com/">https://www.bccfalna.com/</a>');

reload() Method

reload() Method, location Object का अन्तिम Method है, जो Current Web Page को Web Browser के window Object में फिर से Reload कर देता है। जब इस Method को बिना किसी Argument के Call किया जाता है, तो यदि वह Web Page, Web Browser के Cache में Exist हो, तो वहीं से Load होता है।

जबकि यदि इस हम Web Page को फिर से Web Server से प्राप्त करना चाहते हैं, तो हमें इस Method में Parameter के रूप में “true” Value को Specify करना होता है। इस Method को हम दोनों तरीकों से निम्नानुसार लिख सकते हैं:

>>> window.reload();
// Reloads possible from cache.

>>> window.reload(true);
// Reloads back from the server.

जब किसी JavaScript Program में एक बार reload() Method Execute हो जाता है, तो फिर उस Program में उस Statement से आगे लिखा गया कोई भी Statement Execute नहीं होता। (JavaScript location Object)