JSでframesetをbodyに置き換える

最近ブックマークレットでVue.jsを読み込んで既存ページを書き換えるのがマイブーム。

昔ながらの frameset を使っているページでフレームを越えたものを使おうとした時に調べた。

概要

developer.mozilla.org

MDNの通りだけど、bodyタグを作って、 document.bodyを置き換えれば良い。

var aNewBodyElement = document.createElement("body");

aNewBodyElement.id = "newBodyElement";
document.body = aNewBodyElement;

あとはいつも通り煮るなり焼くなり。 (元の内容が必要なら、framesetの内容をiframe+grid等で再現が必要)

経緯

これをしていないと document.body.appendChild 等が framesetに負ける。DOMとしては追加されているようだが見えない。

おまけ

frameset を iframe+gridに置き換える部分をざっくりと。

• framesetの分割をCSSのgridで実現する
• 大まかにはframesetをdivに、frameをiframeに置き換える
• framesetの入れ子はgridでは平坦にする必要があった

サンプル(イメージ)

• frameset

<frameset rows="60,*">
    <frame src="./header.html"></frame>
    <frameset cols="182,*">
        <frameset rows="125,*">
            <frame src="./info.html"></frame>
            <frame src="./menu.html"></frame>
        </frameset>
        <frame src="./main.html"></frame>
    </frameset>
</frameset>

• iframe + grid (vueファイル)

<template>
    <div id="Top">
      <div id="Header">
        <iframe src="./header.html"></iframe>
      </div>
      <div id="Info">
        <iframe  src="./info.html"></iframe>
      </div>
      <div id="Menu">
        <iframe src="./menu.html"></iframe>
      </div>
      <div id="Main">
        <iframe src="./main.html"></iframe>
      </div>
    </div>
</template>

<style scoped>
iframe {
    width: 100%;
    height: 100%;
    border: none;
}
#Header {
    grid-area: header;
}
#Info {
    grid-area: info;
}
#Menu {
    grid-area: menu;
}
#Main {
    grid-area: main;
}
#TopFrm {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 182px auto;
    grid-template-rows: 60px 125px auto;
    grid-template-areas:
        "header header"
        "info main"
        "menu main";
}
</style>