Iframe은 현재 페이지 내에 웹 페이지와 같은 외부 콘텐츠를 포함할 수 있는 HTML 요소입니다. 이 문서에서는 JavaScript를 사용하여 단일 버튼을 사용하여 두 개 이상의 iframe 콘텐츠를 변경하는 방법을 보여줍니다.

아이프레임이란?

iframe은 외부 콘텐츠를 웹 페이지에 삽입할 수 있는 HTML 요소입니다. 라벨을 사용할 수 있습니다. 귀하의 웹사이트에 웹 페이지, 비디오, 문서 또는 기타 멀티미디어 콘텐츠를 삽입합니다. iframe의 기본 구조는 다음과 같습니다.

JavaScript를 사용하면 iframe의 콘텐츠를 동적으로 수정할 수 있어 보다 인터랙티브하고 원활한 사용자 경험을 제공할 수 있습니다.

버튼에서 여러 iframe의 콘텐츠를 변경하는 방법의 예

다음 예에서는 JavaScript를 사용하여 단일 버튼을 사용하여 세 개의 iframe 콘텐츠를 변경하는 방법을 보여줍니다.

function changeContent() {
document.getElementById("iframe1").src = "new_page1.html";
document.getElementById("iframe2").src = "new_page2.html";
document.getElementById("iframe3").src = "new_page3.html";
//더 추가 필요한 경우 프레임, ID와 URL만 변경
}

하나의 버튼에서 두 개 이상의 iframe 콘텐츠 변경

이 예제는 JavaScript에서 단일 버튼을 사용하여 세 개의 iframe 콘텐츠를 변경하는 방법을 보여줍니다.

iframe 콘텐츠 변경

이 예에서는 ID가 있는 3개의 iframe을 만들었습니다. iframe1, iframe2 그리고 iframe3 임베드 page1.html, page2.html 그리고 page3.html 각기. 다음으로 클릭하면 기능을 실행하는 버튼을 만들었습니다.

변경내용(). 이 기능은 getElementById() 각 iframe을 선택하고 해당 속성을 변경하려면 소스 새 페이지로 new_page1.html, new_page2.html 그리고 new_page2.html.