iframeのリンクをセレクトボックスで切り替える!

iframeのリンクをJavaScriptで切り替える方法を説明します。

私はPythonのPlotlyを使ってグラフを作成することが多いです。

Plotlyのグラフをhtmlファイルとしてダウンロードして、複数のグラフを確認する時はブラウザ上でタブを切り替えて確認していました。

しかし比較したいグラフ数が多い場合はタブを切り替えてグラフを確認するのも面倒であったので、セレクトボックスでiframeのリンクを切り替えて、グラフを簡単に確認できるようにしました。



作成したページ

下記のように、htmlファイル(plotlyで作成したグラフ)をセレクトボックスで切り替えることができます。

グラフの拡大はこちら

コード

<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>graph-app</title> <style> html,body { height: 100%; margin: 0; overflow: hidden; } .fullheight { height: 95%; width: 100%; } .selectbox { text-align:center; margin-top: 10px; } </style>
</head>
<body> <div class="selectbox"> <select id="selectdata"> <option value="URL">1つ目のファイル</option> <option value="URL2">2つ目のファイル</option> </select> </div> <iframe src="URL" frameborder="0" class="fullheight" id="targetframe"></iframe> <script> var select = document.getElementById('selectdata'); select.onchange = function () { document.getElementById("targetframe").src = this.value; } </script>
</body>
</html>

リンク先のURLを指定する

セレクトボックスのvalueにリンク先のURLを入れておきます。下記のコードのURLURL2の部分です。

<select id="selectdata">
 <option value="URL">1つ目のファイル</option>
 <option value="URL2">2つ目のファイル</option>
</select>

最初に表示しておきたいページは、iframesrcに入れておきます。

<iframe src="URL" frameborder="0" class="fullheight" id="targetframe"></iframe>

iframeのリンクをJavaScriptで切り替える

下記のようにiframesrcの中身をJavaScriptで切り替えます。

var select = document.getElementById('selectdata');
select.onchange = function () {
 document.getElementById("targetframe").src = this.value;
}

ページを画面高さいっぱいに調整する

下記のcssで高さを画面いっぱいに調整します。

html,body {
 height: 100%;
 margin: 0;
 overflow: hidden;
}

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

1989生まれ、機械機器メーカーで研究開発をしている機械系エンジニアです。 業務効率化や日々の生活を効率化できるプログラミングネタを発信しています。PythonとNotionとSANGO(WordPress)が特に好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。

WP-Searchにサイト事例として掲載されています。