הטמעת דפי אינטרנט באמצעות iframe
מנגנון iframe הוא מנגנון המאפשר להטמיע דפי אינטרנט בתוך עמוד HTML.
המאפיין title קובע כותרת ל-iframe אשר תוצג בעת מעבר עכבר על ה-iframe. המאפיין title אינו חובה, אך מומלץ להשתמש בו, כיוון שהכותרת המוגדרת עוזרת בזיהוי ה-iframe בכלי נגישות שונים.
דוגמה:
<iframe src="https://www.iteacher.co.il" title="iTeacher"></iframe>בדוגמה זו, אנו מטמיעים את האתר הנוכחי.
ניתן לקבוע מידות לגודל האובייקט שיוקצה עבור ההטמעה באמצעות המאפיינים width, height, שיכולים להמדד בפיקסלים או באחוזים מרוחב וגובה המסך.
במקרים שהדף שהמוטמע גדול מהמידות שהוקצו, הוא יוצג בתוך המקום המוקצה עם גלילה.
דוגמה להטמעה במידות מבוססות פיקסלים:
<iframe src="https://www.iteacher.co.il" title="iTeacher" width="800" height="600"></iframe>
דוגמה להטמעה במידות באחוזים:
<iframe src="https://www.iteacher.co.il" title="iTeacher" width="75%" height="100%"></iframe>קביעת מזהים ופתיחת קישורים ב-iframe
ניתן לקבוע מזהה ל-iframe באמצעות מאפיין id.
ברגע שקבענו מזהה ל-iframe, נוכל להתייחס אליו כמו כל לשונית בדפדפן ולפתוח בתוכו קישורים באמצעות התגית a והמאפיין target.
דוגמה:
<iframe src="https://www.mgweb.co.il" title="Website" id="website"></iframe>
<a href="https://www.iteacher.co.il" target="website">google.com</a>בדוגמה זו הגדרנו תחילה את ה-iframe שיפתח על האתר https://www.mgweb.co.il וקבענו לו את המזהה website.
לאחר מכן, פתחנו את האתר https://www.iteacher.co.il ב-iframe באמצעות קישור a סטנדרטי.
טעינה עצלה של iframe
ניתן לקבוע את אופן טעינת ה-iframe באמצעות המאפיין loading. הטעינה יכול להיות eager (ברירת המחדל) או lazy.
טעינה eager - טוענת מידית את ה-iframe ברגע שהתגית נקראת על ידי הדפדפן.
טעינת lazy - טוענת את ה-iframe בצורה עצלה. כלומר, ה-iframe נטען רק אם הוא נכנס לאזור הנצפה על ידי הגולש. אם לדוגמה צריך לגלול מטה את העמוד כדי לראות את ה-iframe, אז הוא לא יטען כל עוד לא גללו את הדף מטה, ויטען בזמן אמת ברגע שהגלילה תגיע לאובייקט של ה-iframe.
דוגמה לטעינה עצלה של iframe:
<iframe src="https://www.iteacher.co.il" title="iTeacher" loading="lazy"></iframe>ברוב המקרים, שיטת הטעינה lazy היא מומלצת יותר, כיוון שהיא מאיצה את טעינת עמוד ה-HTML, משפרת את חוויית המשתמש וטובה יותר לקידום האתר במנועי החיפוש.
