mikeo_410

HTML

1 スーパーリロード

 CTRL+F5（Windows）
 キャッシュを無視して読み込むことのようです。

2 meta タグでキャシュに条件を付ける

 HTMLで書いたページの metaタグで、ブラウザ側の機器でのキャシュの管理に条件を指定できるらしい。

 <meta http-equiv="Cache-Control" content="no-store">
 <meta http-equiv="Cache-Control" content="no-cache">
 <meta http-equiv="Expires" content="86400">
 <meta http-equiv="Expires" content="Tue, 4 Oct 2022 10:00:00 GMT">

3 カーソル・ブラウジング

 ブラウザの表の左右の罫線がブリンクします。カーソルが表示されてしまっています。これは、カーソル・ブラウジングが有効な状態のブラウザの機能のようです。
 On/Off は、F7 キーです。

4 base URL

 パソコン内の文書をフォルダの階層で整理したいと思います。その構造をサーバに反映することにします。
 ヘッダに base タグmetaタグ対的な URL を同じにしないと、私には手に負えません。
 手元の .html と、サーバ上の .html の base 記述を変えることは許容します。

4.1 TOC の問題

 pandoc には、toc オプションがあって、目次を作ってくれます。
 ページ内のリンクは、タグの id属性値を使います。#id属性値 は、id属性値を持つタグを指す URL です。
 目次では、a タグ に href=#id属性値 と書いて、リンクとして機能します。
 しかし、エクスポートした .html をローカルにブラウズすると、上手くいかないことに気が付きました。

1. ページ内の移動にはならず、base URL のフォルダの「インデクス」表示となって、フォルダ内の一覧が表示される。
2. base タグを削除すれば、正しくページ内の移動となる。
3. base タグを指定した状態で、ベースからのフォルダの階層を付加すると、そのフォルダの「インデクス」表示となる。
4. base タグを指定した状態で、ベースからのフォルダの階層と .html のファイル名を付加すると、正しくページ内の移動となる。

 この結果から、

1. #で始まる URL が、ページ内を指すと言う訳ではない。
2. #で始まる URL は、その前に、そのページの .html の URL が省略されたものらしい。
3. そのページの .html の URL が省略され、base URL が指定されていれば、 base URL が参照される。
4. そのページの .html の URL が省略され、base URL が指定されていなければ、 開いているページのフォルダが参照される。
5. この場合、.html のファイル名が省略されていることになるが、#の前に、パスを書く場合は、.html のファイル名を省略できない。

4.2 TOC の対策

 このルールは納得はできないが、ページ自体の .html ファイルを、base URL からの相対で付加すれば、サーバでも上手くいくと考えられます。
 pandoc の機能で付与した TOC に対して、ブラウザが .html を開いたときに実行されるスクリプトで、base URL からの相対パスを補います。

  <script>
    if(document.baseURI[document.baseURI.length-1]=="/"){
      var x = new URL(decodeURI(document.baseURI));
      var b = document.baseURI.substring(x.origin.length);
      var intro = decodeURI(document.location.pathname).substring(b.length)
      var toc = document.getElementById("TOC");
      if(toc){
        var aa = toc.getElementsByTagName("a");
        if(aa){
          (Array.from(aa)).forEach(a => {
            a.setAttribute("href",intro + a.getAttribute("href"));
          });
        }
      }
    }
  </script>

4.2.1 base URL

 document.baseURI は、base タグがある場合は、その href で指定した値になります。base タグがない場合は、開いている.htmlのURIになります。
 base タグで、href="/xyz/" と指定したとします。
 document.baseURI は、ローカルでは、file:///C:/xyz/ のようになり、サーバの.htmlを開くと、http://mikeo410.minim.ne.jp/xyz/ のようになります。
 bese タグを指定のない x.html を開いたとします。
 document.baseURI は、x.html の URL となり、ローカルでは、file:///C:/xyz/x.html 、サーバでは、http://mikeo410.minim.ne.jp/xyz/x.html のようになります。
 ページ内リンクで表示を移動すると、ブラウザのアドレス表示は移動先の id が付いたものに代わります。id="#章1" のように指定したタグに移動したとすると、URL は、file:///C:/xyz/x.html#章1 、サーバでは、http://mikeo410.minim.ne.jp/xyz/x.html#章1 となって、document.baseURI の値も、#章1 が付いたものになる点に注意します。

4.2.2 開いている .html の URL

 ブラウザが開いている .html の URL は、window と document のメンバに、同じ名前で複数あります。
 このうち、.location.pathname は、名前の通り、プロトコルのないパスの形式で、.html のファイル名を含んでいます。ページ内リンクで移動しても id は付いていません。
 それ以外の、.location.href や .location.host などは、http: や file: のプロトコルから始まります。この名前は、ページ内リンクの #章1 のような id も含まれます。

4.2.3 開いている .html の相対URI

 base タグのhrefには / で終わるように設定します。document.baseURI の末尾が / かどうかで、base タグによる設定かどうかを判断することにします。
 base タグによって base URL が設定されていなければ、TOC の変更は不要です。
 開いている .html のパスは、document.location.pathname を使います。
 pandoc は、URI をエンコードするので、デコードして使います。
 document.baseURIは、プロトコルを除きます。残った部分は、document.location.pathname の先頭と一致するはずです。内容は比較せず、 document.baseURI のプロトコルを除き、残った部分の長さだけ、document.location.pathname から削って、開いている .html の相対URIとしました。