Control Window Size with JavaScript. How?

Control Window Size with JavaScript? इससे पहले कि हम Web Browser के Window की Size से संबंधित Properties के बारे में बात करें, पहले हमें किसी भी GUI Window की Anatomy या Structure से सम्बंधित विभिन्न Terms को समझना जरूरी है, ताकि हम Window के Size से सम्बंधित विभिन्न Properties को समझ सकें।

किसी भी GUI Operating System में दिखाई देने वाले Window के मूल रूप से दो हिस्से होते हैं, जिन्हें Client Region व Non-Client Region कहा जाता है। Client Region को सामान्‍यत: Workspace या Page Content Area कहते हैं। यह वही Area होता है, जहां User को Web Page दिखाई देता है। जबकि Non-Client Area के अन्तर्गत Title Bar व Borders आते हैं। Non-Client Area वह Area होता है, जहां User किसी भी तरह का कोई Interaction नहीं कर सकता।

Title Bar व Border यानी सभी Non-Client Region सहित Window की जो Height होती है, उसे Window की Actual Height या Outer Height कहते हैं जबकि Border व Title Bar यानी Non-Client Region को घटाने के बाद जो Height बचती है, उसे Inner Height कहते हैं।

इसी तरह से Left व Right की Border की Width सहित Window की जो Width होती है, उसे Window की Actual Width या Outer Width कहते हैं जबकि Left व Right Side की Border को घटाने के बाद जो बचता है, उसे Inner Width कहते हैं।

Page Content Area की Height व Inner Height तथा Page Container Area की Width व Inner Width में केवल इतना अन्तर होता है कि Page Content Area में Border Included रहता है, जबकि Inner Height व Inner Width में Border Included नहीं होता।

किसी भी Window की Size का Accurate तरीके से पता लगाना भी पूरी तरह से सभी Web Browsers में सम्भव नहीं है, क्योंकि अलग-अलग Web Browsers अलग-अलग तरीके से Window की Size Return करते हैं। फिर भी Firefox, Safari, Opera और Chrome innerWidth, innerHeight, outerWidth व outerHeight नाम की चार Properties Provide करते हैं, जिनका प्रयोग JavaScript के माध्‍यम से Window की Size ज्ञात करने के लिए किया जा सकता है।

Firefox व Safari में outerWidth व outerHeight Properties, Browser Window का Dimension Return करते हैं। जबकि Opera में outerWidth व outerHeight Properties Browser Window के Page View Container का Dimension Return करते हैं जबकि innerHeight व innerWidth Properties, Page View Area को Return करते है, जिसमें Border Included नहीं होता।

Google Chrome में outerWidth व outerHeight Properties Viewport की Size Return करते हैं जो कि वास्तव में innerWidth व innerHeight Properties Return होने वाले मान के समान ही होता है। यानी Google Chrome में outerWidth व outerHeight Properties Browser Window के Dimension Return नहीं करते बल्कि Page View Area या Page Content Area की Height व Width को ही Return करते हैं।

इसी तरह से Internet Explorer अपने Browser Window की कोई Information अपने window Object द्वारा Return नहीं करता, बल्कि Web Browser में Loaded Page के Viewable Area की Information DOM के माध्‍यम से Return करता है। जबकि document.documentElement.clientWidth व document.documentElement .clientHeight ये दोनों Properties सभी Web Browsers के Page Viewport यानी Client Region की Height व Width Provide करते हैं।

हालांकि IE6 में ये दोनों Properties तभी काम करती हैं, जबकि वह Standard Mode में हो। यदि IE6 Quirks Mode में हो, तो इन Properties के स्थान पर document.body.clientWidth व document.body.clientHeight Properties को Use करना पडता है।

इसी तरह से Google Chrome जब Quirks Mode में होता है, तो इन Information को प्राप्त करने के लिए clientWidth व clientHeight Property को document.body तथा document.documentElement दोनों Properties के साथ उपयोग में लिया जा सकता है। सारांश के रूप में कहें तो यहां भी विभिन्न Web Browser के Window की Size को Determine करने का भी कोई Standard तरीका नहीं है।