জাভাস্ক্রিপ্ট উইন্ডো - ব্রাউজার অবজেক্ট মডেল
ব্রাউজার অবজেক্ট মডেল(BOM) জাভাস্ক্রিপ্টের সাথে ব্রাউজারের সম্পর্ক তৈরি করে।
ব্রাউজার অবজেক্ট মডেল(BOM)
ব্রাউজার অবজেক্ট মডেলের(BOM) জন্য অফিসিয়াল কোনো স্ট্যান্ডার্ড নেই।
যেহেতু আধুনিক ব্রাউজারে জাভাস্ক্রিপ্টের একই মেথড এবং প্রোপার্টি দেয়া আছে,তাই এগুলোকে BOM এর মেথড এবং প্রোপার্টি হিসেবে বিবেচনা করা হয়।
উইন্ডো অবজেক্ট
উইন্ডো অবজেক্ট সকল ব্রাউজারে সাপোর্ট করে। এটা ব্রাউজারের উইন্ডো প্রদর্শন করে।
সকল গ্লোবাল জাভাস্ক্রিপ্ট অবজেক্ট, ফাংশন এবং ভ্যারিয়েবলগুলো স্বয়ংক্রিয়ভাবেই উইন্ডো অবজেক্টের মেম্বার হয়ে যায়।
গ্লোবাল ভ্যারিয়েবল হলো উইন্ডো অবজেক্টের প্রোপার্টি।
গ্লোবাল ফাংশন হলো উইন্ডো অবজেক্টের মেথড।
এমনকি ডকুমেন্ট অবজেক্টও(এইচটিএমএল ডোমের) উইন্ডো অবজেক্টের একটি প্রোপার্টিঃ
window.document.getElementById("header");এটার মতোঃ
document.getElementById("header");উইন্ডো সাইজ
ব্রাউজার উইন্ডোর আকার জানতে দুইটি প্রোপার্টি ব্যবহার করা যেতে পারে।
উভয় প্রোপার্টির সাইজ পিক্সেল হিসেবে রিটার্ন হয়ঃ
- window.innerHeight - ব্রাউজার উইন্ডোর ভেতরের উচ্চতা
- window.innerWidth - ব্রাউজার উইন্ডোর ভেতরের প্রস্থ
ব্রাউজার উইন্ডোর (ব্রাউজার ভিউপোর্ট) টুলবার এবং স্ক্রলবার এর অন্তর্ভুক্ত নয়।
IE5-8 ভার্সনের জন্যঃ
- document.documentElement.clientHeight
- document.documentElement.clientWidth
- অথবা
- document.body.clientHeight
- document.body.clientWidth
সকল ব্রাউজারে সাপোর্ট করানোর জন্য কার্যকরী জাভাস্ক্রিপ্ট উদাহরণঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p id="test"></p>
<script>
var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
document.getElementById("test").innerHTML = "Browser Width: " + browserWidth;
</script>
</body>
</html>
ফলাফল
এই উদাহরণটি ব্রাউজার উইন্ডোর উচ্চতা এবং প্রস্থ প্রদর্শন করছে( টুলবার/স্ক্রলবার ছাড়া)ঃ
অন্যান্য উইন্ডো মেথড
আরো কিছু মেথডঃ
- window.open() - নতুন উইন্ডো খোলে
- window.close() - বর্তমান উইন্ডোটিকে ক্লোজ করে
- window.moveTo() - বর্তমান উইন্ডোটিকে সড়িয়ে নেয়
- window.resizeTo() - বর্তমান উইন্ডোর আকার পরিবর্তন করে