obtener - url parts javascript

cómo obtener la url base en javascript

Question

Estoy construyendo un sitio web con CodeIgniter , tengo varios recursos que cargo con la función base_url helper como esta

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

que produce (es decir, www.misitio.com)

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

Puedo intercambiar este recurso con otro en javascript como este

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

lo que sucede es que intentará cargar el recurso sin usar la ruta absoluta generada por php, por lo que mi solución fue agregar una etiqueta ficticia en cada página con php como este

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

Luego modifiqué la línea javascript para

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

funciona, pero no se ve nada elegante, por lo tanto, agradecería cualquier ayuda sobre cómo generar esta URL base desde javascript o cualquier otra solución, gracias :)

Prefería una solución solo de JavaScript y como estoy usando CodeIgniter , una variable document.base_url con los segmentos de la url del protocol al index.php parecía útil

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

con la función base_url() siendo

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

Answer 1

URL base en JavaScript

Puede acceder a la URL actual con bastante facilidad en JavaScript con window.location

Usted tiene acceso a los segmentos de esa URL a través de este objeto de locations . Por ejemplo:

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

En Chrome Dev Tools, puede simplemente ingresar window.location en su consola y devolverá todas las propiedades disponibles.

Lectura adicional está disponible en este hilo de desbordamiento de pila

Answer 2

Esto se hace simplemente haciendo esta variable.

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

Esto tendrá url base ahora. Y ahora crea una función de JavaScript que usará esta variable

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

Y ahora esto siempre usará la ruta correcta.

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

Answer 3

Para obtener exactamente lo mismo que base_url de codeigniter , puede hacer:

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

esto será más útil si trabajas en un archivo Javascript puro.

Answer 4

Puede hacer que PHP y JavaScript funcionen juntos generando la siguiente línea en cada plantilla de página:

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

Luego puede consultar document.mybaseurl en cualquier lugar de su JavaScript. Esto le ahorra cierta depuración y complejidad porque esta variable siempre es coherente con el cálculo de PHP.

Answer 5

Puede que llegue tarde, pero para todos los geeks del futuro. En primer lugar, supongo que quieres llamar a base_url en tu archivo .js . así que consideremos que lo está llamando en el archivo .js muestra siguiente

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

En lo anterior, no hay una base_url asignada. Por lo tanto, el código no funcionará correctamente. Pero es seguro que .js a .js entre <head></head> o <body></body> del archivo View utilizando la etiqueta <script> </script> . Entonces, para llamar a base_url en el archivo .js , tenemos que escribir el siguiente código donde planea llamar al archivo .js . Y se recomienda que cree un archivo de encabezado común y coloque el siguiente código y todas las hojas de estilo de llamada ( .css ) y el archivo javascript ( .js ) allí. como en el ejemplo de abajo

archivo de encabezado común

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

Ahora la base_url también funcionará en el archivo sample.js . Espero que haya ayudado.

Answer 6

Una forma es usar una etiqueta de script para importar las variables que desee a sus vistas:

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

Aquí, envolví el base_url con json_encode para que escape automáticamente cualquier carácter al Javascript válido. Puse base_url en la ventana global para que pueda usarlo en cualquier lugar simplemente llamando a base_url, pero asegúrese de poner la etiqueta del script por encima de cualquier Javascript que lo llame. Con tu ejemplo dado:

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

Answer 7

URL base en JavaScript

Aquí hay una función simple para que su proyecto obtenga una URL 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://.com
}
return url;
}

Answer 8

var baseTags = document.getElementsByTagName("base");
var basePath = baseTags.length ?
baseTags[ 0 ].href.substr( location.origin.length, 999 ) :
"";