web-dev-qa-db-ja.com

JavaScriptからcontextPathを正しい方法で取得するにはどうすればよいですか？

Javaベースのバックエンド（つまり、サーブレットとJSP）を使用して、JavaScriptからcontextPathが必要な場合、それを行うための推奨パターンは何ですか？いくつかの可能性が考えられます。私は何か不足していますか？

1。SCRIPTタグをJavaScript変数で設定するページに書き込みます

<script>var ctx = "<%=request.getContextPath()%>"</script>

これは正確ですが、ページを読み込むときにスクリプトを実行する必要があります。

2。非表示のDOM要素にcontextPathを設定

<span id="ctx" style="display:none;"><%=request.getContextPath()%></span>

これは正確であり、ページを読み込むときにスクリプトを実行する必要はありません。ただし、contextPathにアクセスする必要がある場合は、DOMクエリが必要です。パフォーマンスを重視する場合は、DOMクエリの結果をキャッシュできます。

。document.URLまたはBASEタグを調べて、JavaScript内でそれを理解しようとします

function() {
    var base = document.getElementsByTagName('base')[0];
    if (base && base.href && (base.href.length > 0)) {
        base = base.href;
    } else {
        base = document.URL;
    }
    return base.substr(0,
        base.indexOf("/", base.indexOf("/", base.indexOf("//") + 2) + 1));
};

これにより、ページの読み込み時にスクリプトを実行する必要がなくなり、必要に応じて結果をキャッシュすることもできます。ただし、これは、コンテキストパスがルートディレクトリ（/）または複数のディレクトリ（/mypath/iscomplicated/）ではなく、単一のディレクトリであることがわかっている場合にのみ機能します。

私が傾いている方法

ページのロード時にJavaScriptコードを実行する必要がないため、非表示のDOM要素を優先しています。 contextPathが必要な場合にのみ、何かを実行する必要があります（この場合、DOMクエリを実行します）。

javascriptjspservlets
61
Mike M. Lin

コメントでの議論に基づいて（特にBalusCから）、これよりも複雑なことをする価値はおそらくないでしょう：

<script>var ctx = "${pageContext.request.contextPath}"</script>
62
Mike M. Lin

わかった：D

function getContextPath() {
   return window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
}
alert(getContextPath());

重要な注意：「ルート」コンテキストパスに対してのみ機能します。 「サブフォルダー」では機能しません。または、コンテキストパスにスラッシュ（「/」）が含まれている場合は機能しません。

42
Cedric Simon

番号1を番号3のような関数の呼び出しと組み合わせることで、探しているものを達成できると思います。

ページの読み込み時にスクリプトを実行したくないので、後で関数を呼び出したいですか？いいでしょう、変数に設定した値を返す関数を作成するだけです：

function getContextPath() {
   return "<%=request.getContextPath()%>";
}

これは関数なので、実際に呼び出すまで実行されませんが、DOMトラバーサルやURLの変更を行う必要なく、直接値を返します。

この時点で、@ BalusCがELを使用することに同意します。

function getContextPath() {
   return "${pageContext.request.contextPath}";
}

または、JSTLへのJSPフォールバックのバージョンに応じて：

function getContextPath() {
   return "<c:out value="${pageContext.request.contextPath}" />";
}
5
user159088

Id = "contextPahtHolder"を使用してリンクタグの属性へのコンテキストパスをレンダリングし、JSコードで取得します。例えば：

<html>
    <head>
        <link id="contextPathHolder" data-contextPath="${pageContext.request.contextPath}"/>
    <body>
        <script src="main.js" type="text/javascript"></script>
    </body>
</html>

main.js

var CONTEXT_PATH = $('#contextPathHolder').attr('data-contextPath');
$.get(CONTEXT_PATH + '/action_url', function() {});

コンテキストパスが空の場合（埋め込みサーブレットコンテナの状態など）、空の文字列になります。それ以外の場合、contextPath文字列が含まれます

3
Oleg Shavrov

これで解決策を確認このページの解決策を確認し、次の解決策を作成してください。

Javascript：

var context = window.location.pathname.substring(0, window.location.pathname.indexOf("/",2)); 
var url =window.location.protocol+"//"+ window.location.Host +context+"/bla/bla";
3
Armando Cordova