2012-09-06 14 views
11

Estoy tratando de agregar algunos enlaces hash (en el formato de una tabla de contenido, para poder facilitar la navegación de la página web) a este sitio en el que se usa una etiqueta <base>.¿Cómo sobrescribir la etiqueta <base> sin eliminar la etiqueta?

Ahora, obviamente, debido a la etiqueta base, cualquier otra etiqueta relativa será relativa a la etiqueta base href. Para poder crear esta tabla de contenido interno con los enlaces que apuntan a diferentes partes de la página específica, necesito obtener la URL predeterminada (antes de que la etiqueta base esté en vigencia) para que los enlaces internos funcionen correctamente.

¿Hay alguna manera de evitar la etiqueta base y lograr esto?

+0

"enlaces internos que apuntan a diferentes partes de la página específica" ... ¿Estás hablando de enlaces de hash, como: 'href = "# pestaña-2"?' ¿Puedes dar algún ejemplo? –

Respuesta

8

El efecto de la etiqueta base es global para el documento, y la única forma de anular el efecto de <base href="..."> es utilizar URL absolutas.

Puede usar window.location en JavaScript para obtener la URL de la página, en caso de que el documento se haya recuperado a través de HTTP. Y podrías usarlo para construir URL absolutas.

La etiqueta base normalmente no es necesaria en estos días. Es mejor utilizar tecnologías del lado del servidor que le permitan construir direcciones desde una o más direcciones base. Entonces, posiblemente, el mejor enfoque es deshacerse de la etiqueta.

+1

Uso el software de comercio electrónico que lamentablemente * depende * de la etiqueta '', por lo que todavía está disponible. Hecho posiblemente poco conocido: los enlaces '../ relative' sí funcionan con la etiqueta base si su base es un subdirectorio. –

+1

Los enlaces que comienzan con ../ naturalmente funcionan con una dirección base que contiene un segmento en la parte de la ruta. Entonces no está anulando la etiqueta 'base', simplemente moviéndose bajo su influencia. –

+0

Muchas gracias. Logré obtener la URL predeterminada de mi página. – sSmacKk

3

Usted podría 'arreglar' este uso de algunos jQuery javascript y -

// get all the internal anchors inside #article 
$('#article a').each(
     function() { 
      // get the href attribute 
      href = $(this).attr('href'); 
      // does it have a href? 
      if (href) { 
       // does it have an internal anchor? 
       if (href.match(/#/i)) { 
        // append window.location and write back to the href Attribute 
        new_href = window.location + href; 
        $(this).attr('href', new_href); 
       } 
      } 
     } 
    ); 
+1

Gracias por su respuesta. Es mejor usar 'var' al definir variables, de lo contrario se definirán en el alcance global. –

1

Adición de un / antes del enlace debe hacer el trabajo. Digamos que tiene <base href="/assets/images/" />. Si usa <img src="logo.png" />, entonces carga /assets/images/logo.png. De lo contrario, si usa <img src="/logo.png" />, carga /logo.png desde el directorio raíz.

+0

* Agregar un/* es medio correcto ... Suponiendo que acaba de saltear el protocolo y deja el doble '//'. – yckart

1

Como una pequeña alternativa, para tener las direcciones URL locales y mantener la base href puede intentar esto.

$('a.local').each(
 
    function() { 
 
\t \t // get the href attribute 
 
\t \t var href = $(this).attr('href'); 
 
\t \t // does it have a href? 
 
\t \t if (href) { 
 
\t \t \t var lastSlash = window.location.toString().lastIndexOf("/"); 
 
\t \t \t var new_href = window.location.toString().substr(0, lastSlash + 1) + href; 
 
\t \t \t $(this).attr('href', new_href); 
 
\t \t } 
 
\t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<base href="http://www.google.com"> 
 
<a class="local" href="mylocalpage.html">local page</a> 
 
<a href="pageOnRemoteServer.html">remote page</a>

Cuestiones relacionadas