wake-up-neo.com

wie bekomme ich die Basis-URL in Javascript

Ich erstelle eine Website mit CodeIgniter , ich habe verschiedene Ressourcen, die ich mit der base_url - Hilfsfunktion wie dieser lade

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

die produziert (d. h. www.mysite.com)

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

Ich kann diese Ressource dann mit einer anderen Ressource in Javascript wie dieser austauschen

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

was passiert ist, dass es versucht, die Ressource zu laden, ohne den absoluten Pfad zu verwenden, der von PHP generiert wurde

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

Ich habe dann die Javascript-Zeile auf geändert

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

es funktioniert, sieht aber überhaupt nicht elegant aus, daher würde ich mich über jede Hilfe freuen, um diese Basis-URL aus Javascript oder einer anderen Lösung heraus zu generieren, danke :)


Ich bevorzugte eine reine Javascript-Lösung und da ich CodeIgniter verwende, schien eine document.base_url -Variable mit den Segmenten der URL von protocolbis index.php praktisch

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

mit der Funktion base_url() zu sein

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('/') + '/';
}
33

Basis-URL in JavaScript

Sie können auf die aktuelle URL in JavaScript ganz einfach mit window.location zugreifen.

Sie haben über dieses locations-Objekt Zugriff auf die Segmente dieser URL. Zum Beispiel:

// 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"]

In Chrome Dev Tools können Sie einfach window.location in Ihre Konsole eingeben und alle verfügbaren Eigenschaften werden zurückgegeben.


Weitere Informationen finden Sie auf diesem Stack Overflow-Thread

111
chantastic

Eine Möglichkeit ist, ein Skript-Tag zu verwenden, um die gewünschten Variablen in Ihre Ansichten zu importieren:

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

Hier habe ich die base_url mit json_encode verpackt, so dass automatisch alle Zeichen in gültiges Javascript umgewandelt werden. Ich füge base_url in das globale Fenster ein, sodass Sie es überall verwenden können, indem Sie base_url aufrufen. Stellen Sie jedoch sicher, dass Sie das Skript-Tag über jedem Javascript setzen, das es aufruft. Mit deinem gegebenen Beispiel:

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

Dies geschieht einfach durch diese Variable.

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

Dies wird jetzt eine Basis-URL haben. Erstellen Sie nun eine JavaScript-Funktion, die diese Variable verwendet

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

Und jetzt wird dies immer den richtigen Pfad verwenden.

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

Sie können PHP und JavaScript zusammenarbeiten, indem Sie in jeder Seitenvorlage die folgende Zeile generieren:

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

Dann können Sie überall in Ihrem JavaScript auf document.mybaseurl verweisen. Dies erspart Ihnen etwas Debugging und Komplexität, da diese Variable immer mit der PHP Berechnung übereinstimmt.

2
Schien

Basis-URL in JavaScript

Hier ist eine einfache Funktion für Ihr Projekt, um die Basis-URL in JavaScript abzurufen.

// 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

Ich kann zu spät kommen, aber für alle zukünftigen Geeks. Zunächst möchte ich, dass Sie base_url in Ihrer .js-Datei aufrufen möchten. Nehmen wir an, Sie rufen es in der Beispieldatei .js auf

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

Oben ist kein base_url zugewiesen. Daher funktioniert der Code nicht ordnungsgemäß. Es ist jedoch sicher, dass Sie den .js zwischen <head></head> oder <body></body>of View-Datei mit dem <script> </script>-Tag aufrufen. Um base_url in.js-Datei aufzurufen, müssen Sie den Code unten eingeben, in den Sie die .js-Datei aufrufen möchten. Es wird empfohlen, dass Sie eine allgemeine Header-Datei erstellen und den folgenden Code sowie alle aufrufenden Stylesheets (.css) und die JavaScript-Datei (.js) dort ablegen. genau wie im Beispiel.

gemeinsame Headerdatei

<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>

Nun funktioniert der base_url auch in der sample.js-Datei. Hoffe es hat geholfen.

0
Jeeva

Um genau dasselbe wie base_url von codeigniter zu erhalten, können Sie Folgendes tun:

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

dies ist nützlicher, wenn Sie mit reinen Javascript-Dateien arbeiten.

0
Saddam

Wenn Sie genau das wünschen, was auf der Webseite angegeben ist, verwenden Sie einfach:

document.querySelector('head base')['href']
0
Javarome

in resources/views/layouts/app.blade.php datei

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