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

‏ • 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’);”>

בהצלחה!

תגיות: , , ,

entry

סטודיו לבניית אתרים שהוקם בינואר 2005

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