Iframes הם רכיבי HTML המאפשרים לך להטמיע תוכן חיצוני, כגון דפי אינטרנט, בתוך דף נוכחי. במאמר זה אנו מראים לך כיצד לשנות את התוכן של שניים או יותר iframes באמצעות כפתור בודד באמצעות JavaScript.

מה זה iframe?

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

באמצעות JavaScript, אתה יכול לשנות באופן דינמי את התוכן של iframes, לספק חווית משתמש אינטראקטיבית וחלקה יותר.

דוגמה כיצד לשנות תוכן של מספר iframes מכפתור

בדוגמה הבאה אנו מראים כיצד לשנות את התוכן של שלושה iframes באמצעות כפתור יחיד באמצעות JavaScript:

פונקציה changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//ADD MORE מסגרות במידת הצורך, פשוט שנה את המזהה ואת כתובת האתר

בדוגמה זו, יצרנו שלושה iframes עם מזהים iframe1, iframe2 ו iframe3 כי להטביע page1.html, page2.html ו page3.html בהתאמה. לאחר מכן, יצרנו כפתור שכאשר לוחצים עליו, מבצע את הפונקציה changeContent(). פונקציה זו משתמשת getElementById() כדי לבחור כל iframe ולשנות את התכונה שלו src לדפים החדשים new_page1.html, new_page2.html ו new_page2.html.