web-dev-qa-db-fra.com

comment obtenir l'url de base en javascript

Je construis un site Web avec CodeIgniter , j'ai différentes ressources que je charge avec la fonction base_url helper comme ceci

<link rel="stylesheet" type="text/css" href="'.base_url('assets/css/themes/default.css').'" id="style_color"/>

qui produit (c'est-à-dire www.mysite.com)

<link rel="stylesheet" type="text/css" href="http://www.mysite.com/assets/css/themes/default.css" id="style_color"/>

Je peux alors échanger cette ressource avec une autre en javascript comme ceci

$('#style_color').attr("href", "assets/css/themes/" + color_ + ".css");

ce qui se passe, c'est qu'il va essayer de charger la ressource sans utiliser le chemin absolu généré par php, ma solution consistait donc à ajouter une balise factice dans chaque page avec php comme ceci

<div id="base_url" class="'.base_url().'"></div>

J'ai ensuite modifié la ligne javascript pour

$('#style_color').attr("href", $('#base_url').attr("class") + "assets/css/themes/" + color_ + ".css");

ça marche mais ça n'a pas l'air élégant du tout, alors j'apprécierais toute aide sur la façon de générer peut-être cette URL de base à partir de javascript ou de toute autre solution, merci :)

Je préférais une solution uniquement Javascript et, comme j'utilise CodeIgniter , une variable document.base_url avec les segments de l'url de la protocol au index.php semblait pratique

document.base_url = base_url('index.php');

avec la fonction base_url() étant

function base_url(segment){
   // get the segments
   pathArray = window.location.pathname.split( '/' );
   // find where the segment is located
   indexOfSegment = pathArray.indexOf(segment);
   // make base_url be the Origin plus the path to the segment
   return window.location.Origin + pathArray.slice(0,indexOfSegment).join('/') + '/';
}
javascriptphphtmlcsscodeigniter
33
Nehemias Herrera

URL de base en JavaScript

Vous pouvez accéder à l’URL actuelle assez facilement en JavaScript avec window.location

Vous avez accès aux segments de cette URL via cet objet locations. Par exemple:

// This article:
// https://stackoverflow.com/questions/21246818/how-to-get-the-base-url-in-javascript

var base_url = window.location.Origin;
// "http://stackoverflow.com"

var Host = window.location.Host;
// stackoverflow.com

var pathArray = window.location.pathname.split( '/' );
// ["", "questions", "21246818", "how-to-get-the-base-url-in-javascript"]

Dans Chrome Dev Tools, vous pouvez simplement entrer window.location dans votre console et cela renverra toutes les propriétés disponibles.

Des lectures supplémentaires sont disponibles sur ce fil de débordement de pile

111
chantastic

Une solution consiste à utiliser une balise de script pour importer les variables souhaitées dans vos vues:

<script type="text/javascript">
window.base_url = <?php echo json_encode(base_url()); ?>;
</script>

Ici, j’ai enveloppé le base_url avec json_encode afin qu’il échappe automatiquement à tous les caractères pour activer Javascript. Je mets base_url dans la fenêtre globale afin que vous puissiez l'utiliser n'importe où en appelant simplement base_url, mais assurez-vous de placer la balise script au-dessus du code Javascript qui l'appelle. Avec votre exemple donné:

...
$('#style_color').attr("href", base_url + "assets/css/themes/" + color_ + ".css");
7
sean

Ceci est fait simplement en faisant cette variable.

var base_url = '<?php echo base_url();?>'

Cela aura l'URL de base maintenant. Et maintenant, créez une fonction javascript Qui utilisera cette variable

function base_url(string){
    return base_url + string;
}

Et maintenant, cela utilisera toujours le bon chemin.

var path    =   "assets/css/themes/" + color_ + ".css"
$('#style_color').attr("href", base_url(path) );
4
Muhammad Raheel
var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ? 
    baseTags[ 0 ].href.substr( location.Origin.length, 999 ) : 
    "";
3
goofballLogic

Vous pouvez faire en sorte que PHP et JavaScript fonctionnent ensemble en générant la ligne suivante dans chaque modèle de page:

<script>
document.mybaseurl='<?php echo base_url('assets/css/themes/default.css');?>';
</script>

Ensuite, vous pouvez vous référer à document.mybaseurl n’importe où dans votre JavaScript. Cela vous évite du débogage et de la complexité car cette variable est toujours cohérente avec le calcul PHP.

2
Schien

URL de base en JavaScript

Voici une fonction simple permettant à votre projet d’obtenir une URL de base en JavaScript.

// base url
function base_url() {
    var pathparts = location.pathname.split('/');
    if (location.Host == 'localhost') {
        var url = location.Origin+'/'+pathparts[1].trim('/')+'/'; // http://localhost/myproject/
    }else{
        var url = location.Origin; // http://stackoverflow.com
    }
    return url;
}
1
hsn0331

Je suis peut-être en retard, mais pour tous les futurs geeks. Premièrement, je suppose que vous voulez appeler base_url dans votre fichier .js. alors considérons que vous l’appelez au-dessous d’un exemple de fichier .js

sample.js  

var str = $(this).serialize(); 

jQuery.ajax({
type: "POST",
url: base_url + "index.php/sample_controller",
dataType: 'json',
data: str,
success: function(result) {
alert("Success");
}

Dans ce qui précède, aucun nom base_url n'est attribué. Par conséquent, le code ne fonctionnera pas correctement. Mais il est certain que vous appelerez le .js entre <head></head> et <body></body>of Afficher le fichier en utilisant la balise <script> </script>. Donc, pour appeler le fichier base_url in.js, nous devons écrire le code ci-dessous à l'endroit où vous prévoyez d'appeler le fichier .js. Et il est recommandé de créer un fichier d’en-tête commun et d’y placer le code ci-dessous ainsi que toutes les feuilles de style d’appel (.css) et le fichier javascript (.js). juste comme ci-dessous exemple.

fichier d'en-tête commun 

<head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/sample.js">

<script>
  var base_url = '<?php echo base_url(); ?>';  
</script>


</head>

Maintenant, le base_url fonctionnera également dans le fichier sample.js. J'espère que ça a aidé.

0
Jeeva

Pour obtenir exactement la même chose que base_url de codeigniter, vous pouvez faire:

var base_url = window.location.Origin + '/' + window.location.pathname.split ('/') [1] + '/';

cela sera plus utile si vous travaillez sur un fichier Javascript pur.

0
Saddam

dans resources/views/layouts/app.blade.php fichier

<script type="text/javascript">
    var baseUrl = '<?=url('');?>';
</script>
0
Pasindu Jayanath