Javascript ファイルの相対 URL

StackOverflow https://stackoverflow.com/questions/108853

  •  01-07-2019
  •  | 
  •  

質問

JavaScript ファイルには、クエリをサーバーに送信する必要があるコードがいくつかあります。問題は、ajax 用の適切なリクエスト URL を構築できるように、自分が使用しているスクリプトの URL をどのように見つけられるかということです。

つまり、同じスクリプトが含まれています /, /help, /whatever, など、常にリクエストする必要がありますが、 /data.json. 。さらに、同じサイトが異なるサーバー上で実行されます。 /-folder は別の場所に配置される可能性があります。JavaScript (ez-publish テンプレート) をインクルードする相対 URL を解決する手段はありますが、JavaScript ファイル自体内では解決できません。

このために作成されたすべてのブラウザで動作する小さなスクリプトはありますか?

役に立ちましたか？

解決

このために私は置くのが好きです <link> ページ内の要素 <head>, 、リクエストに使用する URL が含まれています。これらはサーバー側の言語によって生成できるため、常に正しいビューを指します。

<link id="link-action-1" href="${reverse_url ('action_1')}"/>

になる

<link id="link-action-1" href="/my/web/root/action-1/"/>

JavaScript で次のように取得できます。

document.getElementById ('link-action-1').href;

他のヒント

document.location.href 現在の URL が表示されるので、これを JavaScript の文字列関数を使用して操作できます。

クライアントはサーバーの構成を知らないため、サーバーから指示されずに Web アプリケーションのルートを決定する方法はありません。試すことができるオプションの 1 つは、head 要素内で Base 要素を使用し、ハードコーディングするのではなくサーバーに動的に生成させることです (これにより、各サーバーに関連する URL が表示されます)。

<base href="http://path/to/webapp/root/" />

すべての URL はこれに対する相対として扱われます。したがって、/data.json にリクエストを行うだけです。ただし、アプリケーション内の他のすべてのリンクがこのことを念頭に置いていることを確認する必要があります。

スクリプトが独自のファイル名を知っている場合は、ドキュメントを使用できます。getElementsByTagName()。一致するスクリプトが見つかるまでリストを繰り返し、完全な (または相対的な) URL を抽出します。

以下に例を示します。

function getScriptUrl ( name ) {
    var scripts = document.getElementsByTagName('script');
    var re = RegExp("(\/|^)" + name + "$");
    var src;
    for( var i = 0; i < scripts.length; i++){
        src = scripts[i].getAttribute('src');
        if( src.match(re) )
            return src;
    }
    return null;
}

console.log( 'found ' + getScriptUrl('demo.js') );

この方法ではファイル名が衝突する可能性があることを考慮してください。

ライブラリのメイン エントリ ポイント (main.php) に次のコードを含めます。

/**
 * Build current url, depending on protocal (http/https),
 * port, server name and path suffix
 */
$site_root = 'http';
if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on") 
    $site_root .= "s";
$site_root .= "://" . $_SERVER["SERVER_NAME"];
if ($_SERVER["SERVER_PORT"] != "80")
    $site_root .= ":" . $_SERVER["SERVER_PORT"];
$site_root .= $g_config["paths"]["site_suffix"];

$g_config["paths"]["site_root"] = $site_root;

$g_config は、構成オプションを含むグローバル配列です。したがって、site_suffix は次のようになります。開発ボックスでは「/sites_working/thesite/public_html」、仮想ホスト (ドメイン名) を持つサーバーでは「/」だけです。

この方法も優れています。誰かが開発ボックスの IP アドレスを入力すると、「localhost」などの代わりに同じ IP アドレスを使用して JavaScript フォルダーへのパスが構築されます。また、「localhost」を使用する場合は、 「localhost」を使用して URL を構築します。

また、SSL も検出するため、サーバーに SSL サポートを追加した場合に、リソースが HTTP または HTTPS 経由で送信されるかどうかを心配する必要はありません。

次に、テンプレートで次のいずれかを使用します

<link id="site_root" href="<?php echo $g_config["paths"]["site_root"] ?>"/>

または

<script type = "text/javascript">
var SiteRoot = "<?php echo $g_config["paths"]["site_root"]; ?>";
</script>

後者の方が早いと思います。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top