Ramki iframe to elementy HTML umożliwiające osadzanie treści zewnętrznych, takich jak strony internetowe, na bieżącej stronie. W tym artykule pokazujemy, jak zmienić zawartość dwóch lub więcej ramek iframe za pomocą jednego przycisku za pomocą JavaScript.

Co to jest element iframe?

Iframe to element HTML, który może osadzać zawartość zewnętrzną na stronie internetowej. Możesz użyć etykiety osadzić stronę internetową, film, dokument lub inną zawartość multimedialną na swojej stronie internetowej. Podstawowa struktura elementu iframe jest następująca:

Korzystając z języka JavaScript, możesz dynamicznie modyfikować zawartość ramek iframe, zapewniając bardziej interaktywną i bezproblemową obsługę.

Przykład zmiany zawartości wielu ramek iframe za pomocą przycisku

W poniższym przykładzie pokazujemy, jak zmienić zawartość trzech ramek iframe za pomocą jednego przycisku za pomocą JavaScript:

function changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//DODAJ WIĘCEJ RAMKI, JEŚLI KONIECZNE, ZMIEŃ ID I URL
}

Zmień zawartość dwóch lub więcej ramek iframe za pomocą jednego przycisku

W tym przykładzie utworzyliśmy trzy elementy iframe z identyfikatorami element iframe1, element iframe2 I element iframe3 to osadzić strona1.html, strona2.html I strona3.html odpowiednio. Następnie stworzyliśmy przycisk, który po kliknięciu uruchamia funkcję zmień zawartość(). Ta funkcja używa getElementById() aby wybrać każdą ramkę iframe i zmienić jej atrybut źródło do nowych stron nowa_strona1.html, nowa_strona2.html I nowa_strona2.html.