מסגרות מוטבעות מאפשר לך לכלול תוכן ממקורות חיצוניים בדפים שלך
מסגרות מוטבעות, המכונות בדרך כלל רק "iframes", הן הסוג היחיד של מסגרת המותרת ב- HTML5. מסגרות אלה הם למעשה קטע של הדף שלך כי אתה "לגזור". במרחב שיש לך לחתוך את הדף, אז אתה יכול להאכיל את דף אינטרנט חיצוני. במהותו, iframe הוא חלון דפדפן נוסף מוגדר ממש בתוך דף האינטרנט שלך. אתה רואה iframes נפוץ באתרי אינטרנט שצריכים לכלול תוכן חיצוני כמו מפת Google או סרטון מ- YouTube.
שני האתרים הפופולריים משתמשים ב- iframes בקוד ההטבעה שלהם.
כיצד להשתמש באלמנט IFRAME
האלמנט משתמש באלמנטים הגלובליים של HTML5 וכן באלמנטים נוספים. ארבעה הם גם תכונות ב- HTML 4.01:
- -כתובת האתר של המקור של המסגרת
- - גובה החלון
- - רוחב החלון
- - שם החלון
ושלושה חדשים ב- HTML5:
- srcdoc-HTML עבור המקור של המסגרת. תכונה זו מקבלת עדיפות על פני כל כתובת אתר בתכונה src
- ארגז חול - רשימת תכונות שיש לאפשר או לא לאפשר בחלון המסגרת
- ללא תפר - מציין את סוכן המשתמש כי iframe צריך להיות מוצג כאילו הוא חלק בלתי נראה של מסמך האב
כדי לבנות iframe פשוטה, אתה מגדיר את כתובת האתר של המקור ואת הרוחב והגובה:
שים לב, ייתכן שתבחר שלא להשתמש בערכי פיקסלים להגדרות ה- iframe שלך, אך ייתכן שתחליט להשתמש באחוז.
אם אתה בונה אתר אינטרנט בעל יכולת תגובה לשינוי גודל עם גדלי מסך שונים, אחוז זה יהיה חשוב.
יש גם כמה תכונות תקפות ב- HTML 4.01 אבל מיושן ב- HTML5. מאחר שרוב אתרי האינטרנט כיום משתמשים ב- HTML5 +, תכונות אלה הן תכונות שלא תרצה להשתמש בהן (אך ייתכן שתראה אותן במסמכים מדור קודם).
- במקום זאת, השתמש באלמנט A כדי לקשר לתיאור
- -instead, להשתמש ב- CSS לצוף רכוש
- שקיפות, instead, להשתמש במאפיין רקע CSS כדי להפוך את ifram שקוף
- -instead להשתמש במאפיין CSS הגבול
- marginheight-instead , להשתמש במאפיין השוליים CSS
- marginwidth -instead , להשתמש במאפיין השוליים CSS
- במקום זאת, להשתמש במאפיין גלישת CSS
תמיכה בדפדפן IFRAME
רכיב IFRAME נתמך על ידי כל הדפדפנים המודרניים:
- דְמוּי אָדָם
- Chrome
- אתר
- Internet Explorer 2+
- iOS / Safari נייד
- נטסקייפ 7+
- אופרה 3+
- ספארי
אם לא מופיע מספר גירסה ברשימה לעיל, הסיבה לכך היא שכל הגירסאות של הדפדפן הזה תומכות בו.
דבר אחד שיש לשים לב אליו הוא שלמרות שכל הדפדפנים תומכים באלמנט IFRAME, עדיין יש תמיכה מוגבלת בחלק מתכונות HTML5.
- שימוש בגלישה כדי לכבות את הגלילה אינו אמין. אם אתה לא רוצה גלילה על iframes שלך, אתה צריך להמשיך להשתמש במאפיין הגלילה.
- המאפיינים של srcdoc, sandboxoc, ו- Seamless אינם נתמכים על ידי כל הדפדפנים בשלב זה.
קישור עם Iframes
כאשר אתה נותן את iframes שם או מזהה אז אתה יכול להצביע על הקישורים שלך באותו מסגרת עם התכונה על אלמנט. לאחר מכן, כאשר משתמש לוחץ על הקישור, הוא ייפתח בתוך iframe המפנה ולא בחלון הנוכחי.
נסה זאת בעצמך. הקלד את הפרטים הבאים בדף אינטרנט:
אם המסמך שנפתח ב- IFRAME אינו מכיל יעדים כלשהם, כל הקישורים הללו ייפתחו באותו iframe כמו מסמך האב .
ניתן להשתמש בתכונה זו כדי ליצור קישורים ב- IFRAME אחד לשנות את התוכן של IFRAME אחר באותו דף.
IFrames וביטחון
רכיב IFRAME, כשלעצמו, אינו מהווה סיכון אבטחה עבורך או עבור הקוראים שלך.
למרבה הצער, iframes קיבלו שם רע כי הם יכולים להיות בשימוש על ידי אתרי אינטרנט זדוניים לכלול תוכן שיכול להדביק את המחשב של המבקר מבלי לראות את זה על הדף. זה נעשה על ידי שיש קישורים הצבע על IFRAME בלתי נראה אלה תסריטים להגדיר קוד זדוני. המשתמש לוחץ על הקישור וחושב שהקישור נשבר משום שדבר לא קרה, אך סקריפט הוגדר במקום שבו לא ניתן היה לראות אותו.
ישנם גם וירוסי מחשב אשר יזרמו IFRAME בלתי נראה לתוך דפי האינטרנט שלך, למעשה להפוך את האתר שלך לתוך botnet. הם יכולים לעשות זאת באמצעות הזרקת SQL והתקפות אחרות.
הדבר שיש לזכור בעת הוספת IFRAME בדף האינטרנט שלך הוא שהמשתמשים שלך בטוחים בדיוק כמו התוכן של כל האתרים שאליהם אתה מקשר. אם יש לך סיבה להרגיש שהאתר אינו מהימן, אל תקשר אליו בשום אופן ובודאי שלא תכלול את התוכן שלו במסך IFRAME. עם זאת, הקישור לדפים שלך בתוך iframes אינו מהווה סיכון אבטחה עבורך או עבור המשתמשים שלך.
מאמר מקורי מאת ג'ניפר קרינין. נערך בתאריך 11/7/16 על ידי ג'רמי ג'יררד