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を入れておきます。下記のコードのURLとURL2の部分です。
<select id="selectdata">
<option value="URL">1つ目のファイル</option>
<option value="URL2">2つ目のファイル</option>
</select>最初に表示しておきたいページは、iframeのsrcに入れておきます。
<iframe src="URL" frameborder="0" class="fullheight" id="targetframe"></iframe>iframeのリンクをJavaScriptで切り替える
下記のようにiframeのsrcの中身をJavaScriptで切り替えます。
var select = document.getElementById('selectdata');
select.onchange = function () {
document.getElementById("targetframe").src = this.value;
}ページを画面高さいっぱいに調整する
下記のcssで高さを画面いっぱいに調整します。
html,body {
height: 100%;
margin: 0;
overflow: hidden;
}
