iframe は、現在のページ内に Web ページなどの外部コンテンツを埋め込むことができる HTML 要素です。 この記事では、JavaScript を使用して 1 つのボタンを使用して、2 つ以上の iframe のコンテンツを変更する方法を示します。

iframe とは何ですか?

iframe は、外部コンテンツを Web ページに埋め込むことができる HTML 要素です。 ラベルを使用できます Web ページ、ビデオ、ドキュメント、またはその他のマルチメディア コンテンツを Web サイトに埋め込む。 iframe の基本構造は次のとおりです。

JavaScript を使用すると、iframe のコンテンツを動的に変更して、よりインタラクティブでシームレスなユーザー エクスペリエンスを提供できます。

ボタンから複数の iframe のコンテンツを変更する方法の例

次の例では、JavaScript を使用して 1 つのボタンを使用して 3 つの 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 を変更するだけ
}

1 つのボタンから 2 つ以上の iframe のコンテンツを変更する

この例では、JavaScript で 1 つのボタンを使用して 3 つの iframe のコンテンツを変更する方法を示します。

iframe コンテンツの変更

この例では、ID を持つ 3 つの iframe を作成しました。 iframe1, iframe2 と iframe3 埋め込む page1.html, page2.html と page3.html 

それぞれ。 次に、クリックすると関数を実行するボタンを作成しました changeContent(). この関数は getElementById() 各 iframe を選択し、その属性を変更する ソース 新しいページへ new_page1.html, new_page2.html と new_page2.html.