به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت در این جلسه به مبحث Window در جاوا اسکریپت (Window Object ) خواهیم پرداخت. با ما همراه باشید.

The Window Object

window ابجکت نمایانگر پنجره ای است. که حاوی DOM document میباشد.یک window می تواند window اصلی، مجموعه فریم یا فریم مخصمص یا حتی window جدیدی باشد که با جاوا اسکریپت ایجاد شده است.

اگر از جلسه های قبل به خاطر داشته باشید، از متد ()alert در اسکریپت هایمان برای نمایش پیام های popup استفاده کرده ایم. که این یک متد از ابجکت Window میباشد.

در جلسات آینده تعدادی متد و ویژگی های جدید ابجکت Window را مشاهده خواهیم کرد که به ما امکان می دهد کارهایی مانند درخواست اطلاعات کاربر، تأیید عملکرد کاربر، باز کردن پنجره های جدید و …را انجام دهیم که امکان تعامل بیشتری را به ما خواهد داد.

محاسبه عرض و ارتفاع Window در جاوا اسکریپت

ابجکت window متدهای innerWidth وinnerHeight را برای یافتن عرض و ارتفاع نمای پنجره مرورگر (بر حسب پیکسل) از جمله نوار اسکرول افقی و عمودی ارائه می دهد.

در مثال زیر با کلیک بر روی دکمه ، اندازه فعلی پنجره را برای ما نمایش میدهد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Browser Viewport Dimensions</title>
</head>
<body>
    <script>
    function windowSize(){
        var w = window.innerWidth;
        var h = window.innerHeight;
        alert("Width: " + w + ", " + "Height: " + h);
    }
    </script>
     
    <button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Get Browser Viewport Dimensions</title>

</head>

<body>

function windowSize(){

var w = window.innerWidth;

var h = window.innerHeight;

alert("Width: " + w + ", " + "Height: " + h);

}

</script>

<button type="button" onclick="windowSize();">Get Window Size</button>

</body>

</html>

با این حال، اگر می خواهید عرض و ارتفاع پنجره را به استثنای اسکرول بارها پیدا کنید، می توانید از ویژگی های clientWidth وclientHeight هر عنصر DOM (مانند div) به صورت زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Get Width and Height of the Browser Viewport Excluding Scrollbars</title>
    <style>
        body{
            min-height: 2000px;
        }
    </style>
</head>
<body>
    <script>
    function windowSize(){
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        alert("Width: " + w + ", " + "Height: " + h);
    }
    </script>
     
    <button type="button" onclick="windowSize();">Get Window Size</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript Get Width and Height of the Browser Viewport Excluding Scrollbars</title>

<style>

body{

min-height: 2000px;

}

</style>

</head>

<body>

function windowSize(){

var w = document.documentElement.clientWidth;

var h = document.documentElement.clientHeight;

alert("Width: " + w + ", " + "Height: " + h);

}

</script>

<button type="button" onclick="windowSize();">Get Window Size</button>

</body>

</html>

نکته: ابجکت document.documentElement نشان دهنده عنصر ریشه داکیومنت میباشد،که عنصر <html> است، در حالی که شی document.body نشان دهنده عنصر <body> میباشد. که هر دو نیز در تمام مرورگرهای اصلی پشتیبانی می شوند.

خب دوستان گرامی به پایان جلسه Window در جاوا اسکریپت (JavaScript Window )رسیدیم امیدواریم مورد توجه شما قرار گیرد.

سایرمقالات

اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation

پیمایش نودها در جاوا اسکریپت

برای امتیاز به این نوشته کلیک کنید!

[کل: 1 میانگین: 1]

اشتراک‌گذاری

اضافه کردن ، ویرایش یا حذف المنت ها در جاوا اسکریپت | JavaScript DOM Manipulation نوشته قبل

window location در جاوا اسکریپت | ابجکت لوکیشن نوشته بعد

علی فرجی

علی فرجی هستم، برنامه نویس جاوا اسکریپت و ریکت با بیش از 5 سال تجربه. من عاشق برنامه نویسیم و همیشه به دنبال یادگیری چیزهای جدید هستم.همچنین یکی از بنیانگذار های سایت کدایت ، یک سایت آموزش برنامه نویسی در حوزه جاوا اسکریپت، ریکت، اندروید و ... هستم. امیدوارم بتوانم با دانش و تجربه خود به سایر برنامه نویسان کمک کنم تا در این زمینه پیشرفت کنند.