web-dev-qa-db-fra.com

Comment obtenez-vous le contextPath à partir de JavaScript, de la bonne façon?

Avec un back-end basé sur Java (servlets et JSP), si j'ai besoin de contextPath à partir de JavaScript, quel est le modèle recommandé pour le faire, pourquoi? Je peux penser à quelques possibilités. Est-ce que j'en manque?

1. Graver une balise SCRIPT dans la page qui la définit dans une variable JavaScript

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

C'est exact, mais nécessite l'exécution d'un script lors du chargement de la page.

2. Définir le contextPath dans un élément DOM caché

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

Cela est exact et ne nécessite aucune exécution de script lors du chargement de la page. Mais vous avez besoin d'une requête DOM lorsque vous devez accéder à contextPath. Le résultat de la requête DOM peut être mis en cache si les performances sont importantes.

. Essayez de le comprendre en JavaScript en examinant document.URL ou la balise BASE

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));
};

Cela n'exige aucune exécution de script lors du chargement de la page et vous pouvez également mettre en cache le résultat si nécessaire. Mais cela ne fonctionne que si vous savez que votre chemin de contexte est un répertoire unique, par opposition au répertoire racine (/) ou les multiples répertoires vers le bas (/mypath/iscomplicated/).

De quel côté je me penche

Je privilégie l'élément DOM masqué, car il ne nécessite pas l'exécution de code JavaScript au chargement de la page. Ce n'est que lorsque j'ai besoin de contextPath que je dois exécuter quoi que ce soit (dans ce cas, lancez une requête DOM).

javascriptjspservlets
61
Mike M. Lin

D'après la discussion dans les commentaires (en particulier de BalusC), cela ne vaut probablement pas la peine de faire quelque chose de plus compliqué que cela:

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

J'ai compris: D

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

Remarque importante: Ne fonctionne que pour le chemin de contexte "racine". Ne fonctionne pas avec les "sous-dossiers", ou si le chemin du contexte contient une barre oblique ("/").

42
Cedric Simon

Je pense que vous pouvez obtenir ce que vous recherchez en combinant le numéro 1 avec l’appel d’une fonction comme dans le numéro 3.

Vous ne voulez pas exécuter de scripts au chargement de la page et préférez appeler une fonction plus tard? Très bien, créez simplement une fonction qui retourne la valeur que vous auriez définie dans une variable:

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

C'est une fonction, donc elle ne sera exécutée que lorsque vous l'appelez, mais elle renvoie directement la valeur, sans qu'il soit nécessaire d'effectuer des traversées du DOM ou de bricoler des URL.

À ce stade, je suis d'accord avec @BalusC pour utiliser EL:

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

ou selon la version du repli JSP sur JSTL:

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

Je rend le chemin de contexte à l'attribut de la balise link avec id = "contextPahtHolder", puis je l'obtiens en code JS. Par exemple:

<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() {});

Si le chemin du contexte est vide (comme dans le conteneur de servlet intégré), il s'agira d'une chaîne vide. Sinon, il contient la chaîne contextPath

3
Oleg Shavrov

Examinez la solution en vérifiant la solution de cette page, faites la solution suivante, j'espère que cela fonctionne: Exemple:

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