JavaScript で Iframe ソースを変更する

Muhammad Muzammil Hussain 2023年10月12日

JavaScript JavaScript Element

JavaScript で iframe ソースを変更する
JQuery の代替方法

iframeは、ページ URL またはパスを使用して Web ページ内に Web サイトを表示するために使用される HTML 要素です。現在の HTML ドキュメント内に、別のドキュメントを埋め込むことができます。

iframe のサイズを指定するには、"height" 属性と "width" 属性を別々に使用するか、CSS の style 属性を使用できます。

構文：

<iframe src="dummy_iframe.htm" height="200" width="300" title="Dummy Iframe"></iframe>

JavaScript で `iframe` ソースを変更する

iframe ソースを変更する背後にあるアイデアは、iframe の表示で Web ページを切り替えることです。 JavaScript では、ソースを変更したり、JavaScript のデフォルトメソッド getElementById() で再定義したりできます。

getElementById("idOfElement").src に Web ページの新しいパスまたは URL を再割り当てできます。

構文：

getElementById('idOfElement').src = 'newPath.html'

コード例:

<!DOCTYPE html>
<html>
<body>

<h2>Change iframe source in JavaScript</h2>
<p>Click the chosen button to view the chosen page on the website in iframe:</p>

<button onclick="myFunction('https://www.delftstack.com/')">Click to display Home</button>
  <button onclick="myFunction('https://www.delftstack.com/about-us/')">Click to display About</button>
  <br></br>

<script type="text/javascript">
  function myFunction(path) {
    document.getElementById('myIframe').src = path;
  }
  </script>

<iframe id="myIframe" src="https://www.delftstack.com/" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

</body>
</html>

実行コード

上記のソースコードでは、指定された幅と高さの <iframe></iframe> タグを使用して HTML iframe ブロックを作成しました。 iframe 要素に ID を割り当て、デフォルトの src 属性に "https://www.delftstack.com/" パスを割り当てます。

引数としてパスを受け取る myFunction() を宣言しました。その関数では、html 要素 ID を受け取る document.getElementById() を使用し、渡されたパスを src に割り当てます。

iframe ソースを切り替えるための複数のボタンを作成し、それらのボタンのクリックイベントのパスで myFunction() を呼び出しました。

JQuery の代替方法

JQuery には、デフォルトのメソッド attr() があります。そのメソッドを使用して、属性と値を設定することもできます。以下に示すように、JQuery を使用して iframe ソースを再割り当てすることもできます。

構文：

$('#idOfElement').attr('src', 'https://www.delftstack.com/');

デフォルトの attr() メソッドと呼ばれる要素 ID を使用して、属性と値を渡します。

JavaScript で iframe ソースを変更する

JQuery の代替方法

関連記事 - JavaScript Element

JavaScript で `iframe` ソースを変更する