ראשי > dhtml חוצה דפדפנים > מאמר חלק 3 > עמוד נטען לפי דרישה

יצירת עמוד אינטרנט נטען לפי דרישה

בחלק הראשון של המאמר, הדגמתי כיצד להשתמש ב-JavaScript כדי ליצור עצם חוצה-דפדפן כדי להתמודד עם הפערים ב-DHTML שבין נטסקייפ נוויגטור 4.0 ומיקרוסופט אינטרנט אקספלורר 4.0. בחלק השני, השתמשתי בעצמים אלה כדי ליצור אינדקס עם מידע שנטען מראש. החלק השלישי משתמש בעצמים חוצי דפדפן וביכולות הטעינה "על פי דרישה" של מיקרוסופט ונטסקייפ, כדי להדגים טעינת תוכן משרת האינטרנט ללא צורך בטעינה מחדש של העמוד כולו.

טעינת תוכן לפי דרישה פירושה שהתוכן נטען רק כאשר הקורא ביצע פעולה מסוימת. רוב התוכן של עמודים נטען ע"פ דרישה כעמודי אינטרנט שונים, שלא בהכרח קשורים זה לזה. עם גרסה 4.0 של שני הדפדפנים, גם מיקרוסופט וגם נטסקייפ ספקו טכניקות לטעינת תוכן של עמוד אינטרנט חיצוני לתוך עמוד קיים. נטסקייפ מספקת את האפשרות לטעון את התוכן לתוך בלוק CSS-P או LAYER, ומיקרוסופט מאפשרת את היכולת הזו עם IFRAME, או מסגרת או עצם פנימי.

שים לב שהקוד שמדובר עליו ביחידה זו עובד עבור נטסקייפ נוויגטור 4.0 ומיקרוסופט אינטרנט אקספלורר 4.0 בחלונות 95 או NT, אבל ייתכן שלא יעבוד על מערכות הפעלה אחרות.

הוספת עצמים לפי דרישה לעמוד האינטרנט

כדי לטעון תוכן של עמוד לפי דרישה, יש להוסיף לעמוד האינטרנט מקום אחסון עבור הקוד. השתמשתי לשם כך בתג LAYER עבור נוויגטור וב-IFRAME עבור IE. IE מתעלם מתג ה-LAYER ונוויגטור מתעלם מ-IFRAME. בנוסף, העצם IFRAME מוסף בתוך תג NOLAYER, כדי להבטיח שלא ייעשה בו שימוש ע"י נוויגטור. הקוד להוספת ומיקום העצמים מופיע בבלוק הבא:


<LAYER name="content" top=20 left=50 height=400
clip.bottom=400 clip.right=500
style="visibility:hidden" src="part1.htm">
</LAYER>

<NOLAYER>
<IFRAME id="content"
style="position:absolute; left: 50; top: 20; 
width:500; height:400"  src="part1.htm">
</IFRAME>
</NOLAYER>

כדי להוסיף מקור לשני העצמים האלה, השתמשתי בתכונה “src”. בצעתי טעינה מראש של העמוד הראשון, מכיוון שתוכנו לא יופיע בנוויגטור ללא פעולה כלשהי שתכריח את העמוד להופיע. ראינו שטעינת התוכן ע"י שימוש באירוע “onLoad” יכולה להציג או לא להציג את התוכן בנוויגטור 4.0. למשל, אם נשתמש בפונקציה לשינוי תוכן, שמתוארת בהמשך, בתוך אירוע onLoad כדי לטעון את העמוד הראשון, העמוד לא יופיע עד שנלחץ על אחד מהכפתורים. כדי לטעון את קוד הרבדים בצורה טובה, קבעתי את הגובה ואת הרוחב של הרובד, אך עדיין חובה לקרוא לפונקציה שתוודא שהתוכן יופיע במדויק.

לטעינת התוכן במקומות האחסון אוסיף פונקציה לטעינת עמוד התוכן הקודם או עמוד התוכן הבא. לשם כך, שני קישורים נוצרים, וכל אחד מהם קורא לפונקציה שתטען את העמוד המתאים. הקוד ב-HTML הוא כזה:


<DIV id="pages" 
style="position: absolute; left: 570; top: 230">
<a href="" onclick="next_page();return false">Next Page</a>
<p>
<a href="" onclick="prev_page();return false">Previous Page</a>
</DIV> 

אוסיף גם עיצוב עבור הקישורים כדי להבטיח שיופיעו בצורה יפה על הדף: 

<STYLE type="text/css">
   DIV A { font-size: 14pt; font-weight: bold; 
		color: green; text-decoration: none }
</STYLE>

בנוסף, הוספתי סקריפטים כדי להתמודד עם טעינת התוכן אל הרבדים. כתוכן עבור הדגמה זו, פירקנו את חלק 2 של המאמר הזה לשלושה עמודי HTML נפרדים. מכיוון שנטסקייפ ומיקרוסופט משתמשות בטכניקות שונות לטעינת תוכן, יש להוסיף קוד כדי לנהל את הטעינה עבור כל דפדפן. כדי לאפשר שימוש חוזר ב"קוד הטעינה" הזה, הוא מתווסף לעצמים חוצי הדפדפן כשיטה  (method) חדשה בשם objChangeSource. שיטה זו תוסבר בהמשך המאמר.

  לעמוד הקודם      לעמוד הראשי        לעמוד הבא