פתיחת חלון חדש

‏ • 27 ביולי, 2002



הרבה פעמים אנחנו נתקלים בצורך לפתוח חלון חדש של הדפדפן, מתוך החלון הקיים.
במאמר זה נדון בפתיחת חלון חדש ב-JS ובעיצובו.

הבסיס

הפונקציה המאפשרת לנו לפתוח חלון חדש, היא window.open.


1  

window.open(URL,WindowName,[options])

  • URL – הכתובת של הדף אותו אנו רוצים לפתוח (ניתן לפתוח דף ריק, ע"י ציון about:blank כ-URL)
  • WindowName – שם החלון אותו אנחנו רוצים לפתוח. אם החלון כבר פתוח, הדף שבו יתחלף ל-URL שציינו. אם הוא סגור או לא קיים – החלון ייפתח.
  • options – פרמטר אופציונאלי, הנותן לנו לשלוט על עיצוב החלון. אם לא מציינים אותו, החלון ייפתח כשהוא כולל את כל האפשרויות (שורת כתובת, שורת ססטוס וכו') שיש בחלון רגיל של הדפדפן.

לדוגמא, הקישור הזה:


1  

<a href="#" onClick="window.open('http://www.google.com','Google_window');"> Open Window</a>

יתן את התוצאה: Open Window (לחץ על הקישור כדי לפתוח את החלון)

עיצוב החלון

כאמור, הפרמטר options מאפשר לנו לעצב את החלון החדש שייפתח. העיצוב כולל את גודל החלון, ואת סרגלי הכלים שיופיעו בו.
לדוגמא,


1  

window.open("http://www.google.com","Google_window","location=no,menubar=yes");


יפתח לנו חלון הכולל את שורת הכתובת של הדפדפן, ואת שורת התפריטים (File, Edit…).


1  

window.open("http://www.google.com","Google_window","location,height=100,width=100");

יפתח חלון בגודל 100X100 פיקסלים, הכולל את שורת הכתובת.
לחץ כאן


1  

window.open("http://www.google.com","Google_window","location=no,status=no");

קוד זה יפתח לנו חלון ללא שורת הכתובת ושורת הסטטוס.
לחץ כאן

האפשרויות:

  • menubar – שורת התפריטים (File, Edit…).
  • status – שורת הסטטוס של הדפדפן (השורה בה מופיע כתובת הקישור כאשר עוברים מעליו)
  • scrollbars – אפשרות הופעת פסי הגלילה, אם יש בהם צורך.
  • resizable – האם ניתן יהיה לשנות את גודל החלון
  • width – רוחב החלון בפיקסלים
  • height – גובה החלון בפיקסלים
  • top – המיקום של החלון על גובה המסך בפיקסלים, יחסים לנקודה השמאלית עליונה
  • left – המיקום של החלון על רוחב המסך בפיקסלים, יחסים לנקודה השמאלית עליונה
  • toolbar – שורת הכלים של הדפדפן (Back ,Forward , Home, Stop)
  • location – שורת הכתובת של הדפדפן

דוגמאות:

חלון בגודל 400X400 , ללא שורת סטטוס, ללא פסי גלילה וללא אפשרות שינוי גודל החלון:
לחץ כאן


1  

<a href="#" onClick="window.open('http://www.google.com','Google_window','scrollbars=no,location=no,status=no,height=400,width=400');">

חלון בגודל 200X200 פיקסלים, ללא שום תפריט, המופיע בפינה השמאלית העליונה של המסך.
לחץ כאן


1  

<a href="#" onClick="window.open('http://www.google.com','Google_window','height=200,width=200');">

חלון עם כל האפשרויות
לחץ כאן


1  

<a href="#" onClick="window.open('http://www.google.com','Google_window');">

בהצלחה!

תגיות: , , ,

WebMaster Team

מאמרים נוספים של WebMaster Team

עוד בנושא זה

תגובות בפייסבוק

תגיות

.net ASP ASP.Net ASP.NET MVC C# CMS CSHTML CSS Database DB DHTML DOM Dynamic HTML HTML5 JavaScript JS PHP Reference SEO SilverLight SQL VBS Visual Studio W3C WAP WebMatrix Windows Phone wml WPF בניית אתרים בסיס נתונים דינמי דרופל הרצאות בוידאו וורדפרס מדריך סלולארי פורום צד לקוח פורום צד שרת פיתוח צד לקוח צד שרת קידום קידום אתרים