Вградените рамки са HTML елементи, които ви позволяват да вграждате външно съдържание, като например уеб страници, в текуща страница. В тази статия ви показваме как да промените съдържанието на два или повече iframe с помощта на един бутон с помощта на JavaScript.

Какво е iframe?

Вградената рамка е HTML елемент, който може да вгражда външно съдържание в уеб страница. Можете да използвате етикета за вграждане на уеб страница, видео, документ или друго мултимедийно съдържание на вашия уебсайт. Основната структура на iframe е както следва:

С помощта на JavaScript можете динамично да променяте съдържанието на iframes, осигурявайки по-интерактивно и безпроблемно потребителско изживяване.

Пример за това как да промените съдържанието на множество iframe от бутон

В следващия пример показваме как да промените съдържанието на три iframe с помощта на един бутон с помощта на JavaScript:

функция changeContent() {
document.getElementById("iframe1").src = "нова_страница1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//ДОБАВИ ОЩЕ РАМКИ, АКО Е НЕОБХОДИМО, САМО ПРОМЕНЕТЕ ИДЕНТИФИКАТОРА И URL
}

Променете съдържанието на два или повече iframe от един бутон

В този пример създадохме три вградени рамки с идентификатори iframe1, iframe2 и iframe3 които вграждат страница1.html, страница2.html и страница3.html съответно. След това създадохме бутон, който при натискане изпълнява функцията changeContent(). Тази функция използва getElementById() за да изберете всеки iframe и да промените неговия атрибут src към новите страници нова_страница1.html, нова_страница2.html и нова_страница2.html.