HTMLにHTMLをインポートする

HTML

最終更新日 2021年03月19日

少し前から仕事でAdminLTEを使ってみています。
フレームワークを使わずにHTMLファイルでサーバーを介さずに表示できるようにと考えているのですが、画面が増えてくるとサイドメニューの追加がとても面倒です。
一からJavaScriptで書くのも面倒なので探してみるとHTMLにHTMLをインポートする方法があるのを知りました。

HTML Imports: ウェブのための #include – HTML5 Rocks

方法はとっても簡単!

1.ファイルのインポート
<link rel=”import” href=”sidebar.htm”>

2.インポートされたファイル内の要素を追加
document.querySelector(“.sidebar”).appendChild(document.currentScript.ownerDocument.querySelector(“ul”));
※このコードもsidebar.htmに記述できます!

これだけで読み込めちゃいます!

3.あとはおまけで今開いているページを示すためのクラスの追加です。
$(“.sidebar-menu > .index”).addClass(“active”);
こっちは読み込み側に書くと簡単ですね…。
できればこれもsidebar.htmに書きたいところですが、仕組みを考えるのが面倒なので今回はやめておきます。(汗)

ただ、ローカルでは読み込めなさそうなので使うかどうか迷うところですね…。
今回はHTML単体で確認可能なことが私の理想なので使わないことにします。
でもまぁ、目的次第ではかなり使える機能だと思います!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です