Tengo una página que está disponible en la siguiente dirección
http://localhost/foo/test/index.html
y
http://localhost/foo/test
(sin barra invertida)
Puedo colocar un archivo css en el directorio principal ( http://localhost/foo/test/style.css ) y agregarlo en la página con
<link rel = "stylesheet" href = "../style.css" />y el navegador cargará con éxito la hoja de estilo.
Si observamos window.location , es http://localhost/foo/test/index.html en la primera referencia y http://localhost/foo/test en la segunda referencia (es decir, tenemos un elemento de ruta adicional en el final de la primera url y no lo tiene en la segunda).
¿Cómo sabe un navegador que debe realizar una solicitud a http://localhost/foo/style.css para obtener el contenido de la hoja de estilo en ambos casos? ¿Y cómo puedo obtener esta URL base con javascript del lado del cliente (o saber que la test es un directorio y no un archivo)?
Por ejemplo, si quiero saber que las solicitudes a http://localhost/foo/style.css y ../style.css son las mismas.
Aviso: no puedo usar el código del lado del servidor para ello.
UPD : Hay un error en la pregunta. El navegador no carga correctamente la hoja de estilo de la URL sin una barra al final. ¡Gracias!
No es una respuesta completa con seguridad, pero en el lado de JS intente con el objeto window.location
window.location.href devuelve el href (URL) de la página actual
window.location.hostname devuelve el nombre de dominio del servidor web
window.location.pathname devuelve la ruta y el nombre de archivo de la página actual
window.location.protocol devuelve el protocolo web utilizado (http: o https:)
window.location.assign() carga un nuevo documento
Puede obtener la URL base del sitio actual mediante el uso de la ventana de JavaScript Objeto
console.log(window.location.origin) //gives the current url