آموزش متد open در BOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد open در BOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد open در BOM جاوااسکریپت
با استفاده از متد ()open میتونیم یک پنجره ( Window ) یا یک تب ( Tab ) جدید در مرورگر ایجاد کنیم.
این متد یسری پارامتر یا آپشن داره که با استفاده از اونا میتونیم تنظیماتی رو بروی پنجره یا تب جدید باز شده اعمال کنیم، تنظیماتی مثه مثلا آدرسی که قراره باز بشه یا مثلا اندازه عرض و ارتفاع پنجره باز شده و…
برخی از آپشن ها یا تنظیمات ( مثه fullscreen , location , resizable و.. ) فقط بروی مرورگرهای خاصی عمل میکنند و دوباره همینا باز میبینی رو همون مرورگرهای خاص هم باز عمل نمیکنن، والا دیگه این دست من نیست شما ببخشید.
با استفاده از متد ()close میتونیم پنجره یا تب باز شده را ببندیم. ( یعنی برای بستن پنجره باز شده )
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدون هیچ پارامتری ( یه پنجره خالی یا Blank باز میشه )
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open(); } </script> |
مثال شماره ۲ : تنظیم اندازه عرض و ارتفاع پنجره و مشخص نکردن آدرس URL ( آدرسی که باید تو پنجره باز شه ) وقتی آدرس URL مشخص نشده باشه یه پنجره خالی یا Blank باز میشه.
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open("","","width=500,height=200"); } </script> |
مثال شماره ۳ : مشخص کردن آدرس URL
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open("https://free-learn.ir/","","width=600,height=300"); } </script> |
مثال شماره ۴ :مشخص کردن نحوه باز شدن پنجره جدید ( مثلا در تب جدید ( blank_ ) باز بشه یا در صفحه فعلی ( self_ ) )
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open("https://free-learn.ir/","_self"); } </script> |
مثال شماره ۵ :استفاده از چندین آپشن یا تنظیمات برای پنجره جدید
- width : اندازه عرض
- height : اندازه ارتفاع
- left : میزان فاصله از سمت چپ به راست
- top : میزان فاصله از سمت بالا به پایین
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open("https://free-learn.ir/","_blank","width=400 , height=400 , left=400 , top=100"); } </script> |
مثال شماره ۶ :ایجاد پنجره جدید و ریختن محتوا به داخل پنجره
|
1 2 3 4 5 6 7 8 9 |
<script> function MyWindow(){ var Win = window.open("","_blank","width=400 , height=400"); Win.document.write("<h2 style='text-align:center; color:blue;'>سایت آموزشی فری لرن</h2>"); Win.document.write("<p style='text-align:center;'>به سایت آموزشی فری لرن خوش آمدید</p>"); } </script> |
مثال شماره ۷ : باز کردن چندین آدرس بصورت همزمان
|
1 2 3 4 5 6 7 8 9 |
<script> function MyWindow(){ window.open("https://free-learn.ir/","_blank"); window.open("https://free-learn.ir/","_blank"); window.open("https://free-learn.ir/","_blank"); } </script> |
مثال شماره ۸ : مشخص کردن یک نام برای پنجره و گرفتن همون نام در خوده پنجره
|
1 2 3 4 5 6 7 8 |
<script> function MyWindow(){ var Win = window.open("","MYWINDOW","width=400,height=400"); Win.document.write( "Name = " + Win.name ); } </script> |
مثال شماره ۹ : با کلیک بروی یک دکمه پنجره جدید باز میشه و با کلیک بروی دکمه دیگه بسته میشه.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script> var Win; function Open(){ Win = window.open("https://free-learn.ir/","_blank","width=400,height=400"); } function Close(){ Win.close(); } </script> |
مثال شماره ۱۰ : استفاده از چندین آپشن ( مقادیری که در جدول پارامترها قرار دارد )
همونطور که کمی بالاتر اشاره کردم، این آپشن ها فقط روی مرورگرهای خاصی کار میکنند ولی با این وجود بازم ممکنه رو همون مرورگرها کار نکنند.
مثلا آپشن resizable فقط و فقط بروی مرورگر IE ( اینترنت اکسپلورر یا Internet Explorer ) کار میکنه ولی بازم ممکنه روی این مرورگر این آپشن کار نکنه.
|
1 2 3 4 5 6 7 |
<script> function MyWindow(){ var Win = window.open("https://free-learn.ir/","_blank","toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400"); } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | IE |
| ()open | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری متد open در BOM جاوااسکریپت
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
window.open( URL , Name , [ Option1 , Option2 ,.. ] , Replace ) |
Free-Learn
جدول پارامترها
در جدول زیر میتوانید، پارامترهایی را که میتوان در این متد استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| URL | اختیاری – یک آدرس که قراره باز بشه اگه آدرس مشخص نشود یک صفحه خالی یا about:blank باز میشه |
| Name | اختیاری – نحوه باز شدن پنجره جدید یا مشخص کردن یک نام برای پنجره _blank : باز شدن در تب جدید _parent : باز شدن در پنجره پدر یا والد _self : باز شدن در پنجره فعلی _top : باز شدن در بالاترین سطح از پنجره باز Name : مشخص کردن یک نام برای پنجره |
| Options | channelmode = yes|no|1|0 نمایش پنجره در حالت تئاتر ( فقط در مرورگر اینترنت اکسپلورر ) fullscreen = yes|no|1|0 نمایش پنجره در حالت تمام صفحه ( فقط در مرورگر اینترنت اکسپلورر ) width = [pixels] تنظیم اندازه عرض به پیکسل height = [pixels] تنظیم اندازه ارتفاع به پیکسل left = [pixels] میزان فاصله از سمت چپ به راست به پیکسل top = [pixels] میزان فاصله از سمت بالا به پایین به پیکسل location = yes|no|1|0 نمایش نوار آدرس ( فقط در مرورگر اُپرا ) menubar = yes|no|1|0 نمایش نوار منو resizable = yes|no|1|0 قابلیت تغییر اندازه مرورگر ( فقط در مرورگر اینترنت اکسپلورر ) scrollbars = yes|no|1|0 نمایش اسکرول بار ( در مرورگرهای IE, Firefox , Opera ) status = yes|no|1|0 نمایش نوار وضعیت titlebar = yes|no|1|0 نمایش نوار عنوان toolbar = yes|no|1|0 نمایش نوار ابزار ( فقط مرورگرهای IE و فایرفاکس ) |
| Replace | اختیاری – مشخص میکند که آیا آدرس جدید در تاریخچه مرورگر جایگزین آدرس فعلی شود یا به عنوان یک آدرس جدید ثبت شود |
Free-Learn
نکات و توضیحات
- با استفاده از متد ()open میتونیم یک پنجره یا تب جدید در مرورگر باز کنیم.
- با استفاده از متد ()close میتونیم پنجره یا تب باز شده را ببندیم.
- برخی از آپشن ها فقط در مرورگرهای خاصی عمل میکنند، ولی بازم با این وجود ممکنه در همون مرورگرها بازم عمل نکنند، ( شما به بزرگواری خودت ببخش )
