テキストから作られる HTML の相対パス修正
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ innerHTML で DOM 作ったあとでも一度 JavaScript の処理が終わらるまでは画像のロードされないみたい
ちょっとしたビュワーを作ったらパス解決でちょっとめんどうなことになりました
イメージとしてはマークダウンなどのように文字列をベースに HTML 形式で表示するものです
普段は その元となるテキストファイルからの相対パスで そこに使う画像パスを指定しています
そうしないと作ってる段階のプレビューとかの確認の都合で不便なんです
でも 実際に表示するのはビュワーの方なのですが ビュワーではその表示する HTML の元になるテキストファイルへの相対パスを書いておいてそのページを fetch で取得して HTML 生成します
となると 画像など外部データのパスはテキストファイルからの相対パスになっているのにブラウザからはビュワーからの相対パスとして処理されてしまいます
HTMLの元になるテキストデータ
/data/abcd.txt
/data/img/abcd.img
ビュワー
/viewer/index.html
(表示されたページ)
いい方法がないものかと考えたのですが 結局生成された HTML から相対パス部分を自分でどうにかするしかなさそうです
解決策はこんなになりました
テキスト状態で URL っぽいのを取り出すのはさすがに嫌だったので innerHTML に入れたあとで DOM の検索で画像の src 属性を変更しています
リンクがアレば a タグで href をすれば OK です
機械的な HTML 出力なので変なところに data-url みたいのがなくて場所も限られているのでまぁよしとします
それとこのコードでは innerHTML に入れて DOM を構築した後に URL を切り替えているので ムダにエラーばっかりになる間違ったパスで画像のロードは起きてないです
いったん JavaScript の処理が完全に終わってしまわないと URL の画像の取得はされないみたいです
イメージとしてはマークダウンなどのように文字列をベースに HTML 形式で表示するものです
普段は その元となるテキストファイルからの相対パスで そこに使う画像パスを指定しています
そうしないと作ってる段階のプレビューとかの確認の都合で不便なんです
でも 実際に表示するのはビュワーの方なのですが ビュワーではその表示する HTML の元になるテキストファイルへの相対パスを書いておいてそのページを fetch で取得して HTML 生成します
となると 画像など外部データのパスはテキストファイルからの相対パスになっているのにブラウザからはビュワーからの相対パスとして処理されてしまいます
HTMLの元になるテキストデータ
/data/abcd.txt
画像の場所は [img/abcd.img] !
画像のパス/data/img/abcd.img
ビュワー
/viewer/index.html
テキストデータは [../data/abcd.txt] !
(表示されたページ)
画像の場所は [img/abcd.img] !
/viewer/img/abcd.img にファイルはないからエラー画像になりますいい方法がないものかと考えたのですが 結局生成された HTML から相対パス部分を自分でどうにかするしかなさそうです
解決策はこんなになりました
$("#content").innerHTML = html
Array.from($("#content").querySelectorAll("img"), e => {
e.src = new URL(e.getAttribute("src"), new URL(textfile_path, location.href).href).href
})
Array.from($("#content").querySelectorAll("img"), e => {
e.src = new URL(e.getAttribute("src"), new URL(textfile_path, location.href).href).href
})
テキスト状態で URL っぽいのを取り出すのはさすがに嫌だったので innerHTML に入れたあとで DOM の検索で画像の src 属性を変更しています
リンクがアレば a タグで href をすれば OK です
機械的な HTML 出力なので変なところに data-url みたいのがなくて場所も限られているのでまぁよしとします
それとこのコードでは innerHTML に入れて DOM を構築した後に URL を切り替えているので ムダにエラーばっかりになる間違ったパスで画像のロードは起きてないです
いったん JavaScript の処理が完全に終わってしまわないと URL の画像の取得はされないみたいです