見出し画像

【Vue.js】iframeで分割フレームもどき

かびねこ

frameset！生きとったんかワレ！

会社のお仕事でHTMLで作られたドキュメントを引き継いで保守することになったのだが、そいつがframeset＆frameタグを使った左右フレーム分割で作られていた。懐かしいなオイィ！

しかしなんか最近どっかで見たような気がする…と思ってよくよく考えたら阿部寛のホームページじゃねえか。なんか阿部寛のホームページってノスタルジックみが強すぎるというか、もはや文化財レベルだと思うの。

まあそれはさておき、俺はこの引き継いだドキュメントを保守せにゃならんし、いつかは誰かに引き継がなければならんだろう。HTML5環境(こまけえ話するとHTML Living Standard)がスタンダードになってから久しいが、残念ながら今となっては非推奨となっているframeを生かしてやる事はできない。

frameをiframe+Vueに置き換える

という訳で、みんな大好きiframeとVue.jsで置き換えてみる事にした。現状はHTML上にURLがベタ書きされてて保守しづらさが限界突破してたので、データ部分とビュー部分をなんとかして分けてやりたかったのだ。

とりあえず、テキトーに組んだサンプルをGitHubに上げといた。左側のサイドメニューに反応して、右側にページが読み込まれる、という至極シンプルな造りだ。

ファイル構成

画像2

index.htmlからmenuA-1～menuB-2.htmlを動的に読み込んで表示させたい。
Vue関係のあれこれはindex.jsにまとめて記述。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>iframe-test</title>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
   <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container">
   <div id="left">
       <div id="listMenu" v-for="menu in listMenu">
           <div class="menuCaption">{{menu.caption}}</div>
           <ul class="menuItem">
               <li v-for="item in menu.items" @click="showHtml(item.url)">{{item.caption}}</li>
           </ul>
       </div>
   </div>
   <div id="right">
       <iframe :src="activePage"></iframe>
   </div>
</div>
</body>
<script src="index.js"></script>
</html>

まずは表っ面。div#leftが従来のメニュー部分で、div#rightは内部データとして持ってる表示中ページ(activePage)を表示してる。

div#leftはVue側で内部データとして持ってるメニュー一覧から「大項目の名前(listMenu[n].caption)」をまず持ってきて、その下にリスト要素で「小項目の名前(listMenu[n].items[m].caption)」を表示。リスト要素がクリックされたら「小項目のURL(listMenu[n].items[m].url)」をactivePageに設定してる。

Vue部分

var container = new Vue({
   el : "#container",
   data : {
       activePage : "",
       listMenu : [
           {
               caption : "A",
               items : [
                   {caption : "A-1", url : "menuA-1.html"},
                   {caption : "A-2", url : "menuA-2.html"},
                   {caption : "A-3", url : "menuA-3.html"}
               ]
           },
           {
               caption : "B",
               items : [
                   {caption : "B-1", url : "menuB-1.html"},
                   {caption : "B-2", url : "menuB-2.html"},
               ]
           }
       ]
   },
   methods : {
       showHtml : function(url){
           this.activePage = url
       }
   },
   mounted : function() {
       let defaultUrl = this.listMenu[0].items[0].url
       this.showHtml(defaultUrl)
   }
})

裏側のデータ定義はこんな感じ。とりあえず、ページが表示されたときはlistMenuの先頭要素をテキトーに表示させてる。

成果物

画像1

できた！以上！

この記事が気に入ったらサポートをしてみませんか？