Q&A
https://teratail.com/questions/294935
対話のできない質問者の意味不明な解決。
前提・実現したいこと
CSSファイルを後から読み込ませるために、現在地からルート階層までのパスを取得し、共通jsで読み込ませるファイルのurlを指定したい。
発生している問題・エラーメッセージ
現在地からルート階層までのパスを取得するjavascriptが分からない。調べてもヒットしなかった。
該当のソースコード
javascript
1requestAnimationFrame(function(l){l=document.createElement('link'); 2 l.rel='stylesheet';l.href= + 'small.css';document.head.appendChild(l)})
このソースを使って、small.cssの前に「../../../」を書きたいと思います。「../../../」を
HTML
1<link rel="stylesheet" href="../../../assets/css/style.css">
から取得したいです。どうすれば取得できますか？
試したこと
「javascript ルートパス 取得」で調べましたが見つかりませんでした。
Firefox最新、safari604.1
なぜそうする必要があるのか前提や背景を記載してください。
xamppを使っているのになぜパスの書き換えをする必要があるのでしょう。
xamppで絶対パスを使う方法を色々試したのですが、何故か使えなかったためです。ホストの書き換え、サーバーの登録など一通り試しました。
現時点で絶対パスのファイルは読み込まれていません。
XAMPPならPHP側で絶対パスとれますが。(ブラウザから参照できないけど)
> xamppで絶対パスを使う方法を色々試したのですが
PHPなど、サーバーサイドからは、
絶対パスの取得はできますが。
とにかく、何をどうしたいか、
を明確にして下さい。
それを明確にすれば、質問者さんがやろうとしている方法より、有効な手段の回答が出てくるかもしれません。
今の質問状態では、質問者さんがなんでそのような事をしたいのかが意味不明です。
回答4件
0
自己解決
ファイルのパスがそもそも間違っていました。ルート相対パスでxamppで表示できました。よく分かっていなくてすみません。
投稿2020/11/03 10:34
総合スコア46
0
location
| コード | 値(GC) | 値(Fx) |
|---|---|---|
location.href | file:///D:/test.html | file:///D:/test.html |
location.pathname | /D:/test.html | /D:/test.html |
参考。
HTML
HTML
1<a href="/">root(/)</a> 2<a href="/D:/">/D:/</a>
| href属性値 | 絶対URI(GC) | 絶対URI(Fx) |
|---|---|---|
| / | file:///D:/ | file:/// |
| /D:/ | file:///D:/ | file:///D:/ |
結論
location.pathname から正規表現を使用して、**/D:/もしくはfile:///D:/**を取得して下さい。
Re: erp さん
投稿2020/11/01 05:27
編集2020/11/01 05:35
総合スコア18166
0
質問に対する解ではありませんが、
コメントのやりとりを見て、なぜそれをやろうとしているかの理由がわかりましたので、
その事に関しての回答になります。
USBメモリにWebサイトのデータファイルを入れて先方に確認してもらう、に関して
非常に非効率な上、逆に危険と言える手法です。
15年以上前でさえ、この手法は廃れていたと言えます。
今すぐそのやり方はやめましょう。
ソフトウェア案件ならばまだ有効かもしれない
パッケージ化したソフトウェアならば、今でもそういった渡し方をする案件もあるかもしれません。（CDに焼いたり）
しかし、いずれにせよ、Webサイト案件でやるのは愚の骨頂です。
ではどうするか
サーバーにアップロードして見せるべきです。
自身が仕事で使っているサーバーの、サブドメインを作成し、
そこにサイトのデータをアップロード、
Basic認証をかけるなどで、通常アクセスでは閲覧できないようになどすれば、
パブリックではありますが、パスワードなどを知らない人間では見れない状態を作れます。
先方に、閲覧に必要なIDとパスワードを教えればいいでしょう。
そうすれば、最終納品のソースコードも変えずに済みます。
また、検索にインデックスされるのが懸念があるなら（Basic認証かけた時点でインデックスされませんが）、
metaにインデックスさせないためのコードを埋め込む方法もあります。
（その場合は、コードは変わってしまうが）
他にもロボットにインデックスさせない方法はあります。
いずれにせよ、USBでデータをいちいち渡してローカルで確認してもらうなんてことは、
正直やったら恥ずかしいレベルで、何もわかってないと思われても仕方ないので、
テストサーバーにアップロードして見てもらう方法に変えるべきです。
投稿2020/10/31 17:04
総合スコア9528
すみません、クライアント案件ではないです。
個人で使っているPCがいつお陀仏してもいい状態なので、USBで済ませようとしています。
それならグーグルドライブマウントして同期したフォルダで作れば良いんじゃないかね・・・
↑は質問者が中学生高校生かなと思ってのコメントなので、もしそれよりも上なら働いて新しいパソコン買いましょう
@erp さん
> 個人で使っているPCがいつお陀仏してもいい状態なので、USBで済ませようとしています。
USBメモリをバックアップとして使えばいいのでは。
USBメモリだけに保存した場合、USBメモリがお陀仏になった時にデータを失いますよ。
Googleドライブを使うとルート階層にxamppを置けないので（C:¥Users¥×××¥Googleドライブ）出来ません。
メモリの紛失は懸念材料ですが、仕方ないと思います。
紛失ではなく、故障もあります。
PCのデータ消失を懸念して、USBメモリは懸念されないのに違和感を覚えます…。
0
直接ルートからのパス /assets/css/style.css を指定するのは駄目なのでしょうか。
どうしても相対パスにする必要があるのでしょうか。
投稿2020/10/30 13:17
総合スコア629
こんばんは。ローカルでルート相対パスを見られる環境構築が出来ない事情があり（USB内にフォルダを入れているため）、ルート相対パスだと見られません。
そのため、相対パスに変換する必要があるのです。
USBないのファイルもXAMPPで確認できる方法があればいいのですが……。
USBで渡す必要がある状況ということですか？
ご自身のレンタルサーバーなどに、アップロードして、それを見てもらう、だといけないのでしょうか？
そうですね、USBで済ませたいです。サーバーに上げる前にデザインの確認などをローカルで行いたいので、困っています。
XAMPPをUSB内に構築する方法があるそうなのてそちらを試してみようかと思います。
ですが、相対パスを取得する方法があれば知りたいです。、
実際に試してみないと何ともですが、window.location.pathnameのスラッシュの数（ローカルだと¥になったりするかも）で判断できないでしょうか。
( window.location.pathname.match(/[¥/]/g) || [] ).length
なんにせよ、あまり有効な方法とも言えませんので、
サブドメインを作成などで、
アップロードし、
Basic認証をかける、検索にインデックスさせない処理をし、
オンラインで先方に見せるべきです。
USBでファイルを渡すのは、
最終のソースコードと変えねばならない、など、あまりにも非効率なデータの見せ方です。
相対パスで書いてUSBで渡すのに何の問題があるのか分からない
すみません、語弊があったというか勘違いを助長させてしまった様なのですが、クライアント案件ではないです。
個人で使っているPCがいつお陀仏してもいい状態なので、USBに環境構築をしたいのです。
そこで相対パスが必要になってきます。
そして
( window.location.pathname.match(/[¥/]/g) || [] ).length で個数を取得した後、「../」その個数分書くにはどうすれば良いのでしょうか……。
> ローカルでルート相対パスを見られる環境構築が出来ない事情があり（USB内にフォルダを入れているため）、
少なくとも、Google Chromeでは file:// でも「絶対パス」を使えましたが、動作環境は何でしょう？
「絶対パス = Adobe提唱の『サイトルート相対パス』と同義」
https://teratail.com/questions/17299
ローカルで絶対パスを見ているのはFirefoxです。今のところChromeに移行するつもりはありません。
Firefoxでもローカルで絶対パスは使えました。
あなたの回答
tips
プレビュー
