etiqueta - BASE HREF, javascript e Internet Explorer frente a Firefox

inspinia bootstrap 4

Question

Pregunta:

IE y Firefox / Safari parecen lidiar de manera diferente con las solicitudes de tipo de ubicación de BASE HREF y Javascript window.location. Primero, ¿es esta una descripción precisa del problema? ¿Que esta pasando? ¿Y cuál es la mejor solución en varios navegadores para hacer frente a esta situación?

Contexto:

Tengo un pequeño archivo plano PHP (es en realidad un prototipo de prueba de usabilidad).

Genero dinámicamente el valor HREF de la etiqueta BASE en PHP, es decir, si se ejecuta en el servidor de nuestra compañía, es:

$basehref = ''http://www.example.com/alpha/bravo/UsabilityTest/'';

y en mi máquina dev local, es:

$basehref = ''http://ellen.local/delta/echo/foxtrot/UsabilityTest/''; 

Para una de las tareas, recojo información del usuario, hago algunas transformaciones en Javascript y lo envío al servidor usando un código como este:

function allDone() {
// elided code for simplicity of stackoverflow question
var URI = "ProcessUserInput.php?";
URI = URI + "alphakeys=" + encodeURI( keys.join(",") );
URI = URI + "&sortedvalues=" + encodeURI( values.join(",") );
window.location = URI;
}

Tanto el archivo javascript (que contiene la función allDone () ) como el script PHP de procesamiento ( ProcessUserInput.php ) se encuentran en un subdirectorio de UsabilidadTest. En otras palabras, su URL real es

http://www.example.com/alpha/bravo/UsabilityTest/ / ProcessUserInput.php aka

$basehref . ''/foxtrot/ProcessUserInput.php''

El problema

El JavaScript de IE básicamente parece ignorar el BASE HREF. El javascript y el procesador PHP viven en el mismo directorio, por lo que la llamada a ProcessUserInput.php funciona bien. La entrada se procesa y todo funciona bien.

Pero cuando pruebo en Firefox, parece que JavaScript usa BASE HREF, porque la salida del script se envía a

$basehref . ''/ProcessUserInput.php''

Esto se rompe, porque ProcessUserInput.php está en un subdirectorio de basehref. Sin embargo, si agrego el nombre del subdirectorio al javascript, ya no funciona en IE.

Soluciones?

Puedo pensar en algunas maneras de resolver esto:

• En Javascript, lea la propiedad HREF de la etiqueta BASE y anteponga manualmente a var URI en el javascript, llamando a una URL absoluta totalmente resuelta
• Procese el archivo .js con PHP e inserte la variable $basehref en el script
• Mueve los archivos
• ¿Algo más?

Estoy seguro de que debe haber otras formas de resolver esto también. ¿Cuál es la mejor manera de lidiar con BASE HREF en JavaScript cuando IE y Firefox lo aplican de manera diferente en JavaScript?

Answer 1

IE y Firefox / Safari parecen lidiar de manera diferente con las solicitudes de tipo de ubicación de BASE HREF y Javascript.

Sí, esta es una diferencia de larga data desde los primeros días de Netscape-vs-IE.

IE aplica base-href solo en el momento en que interactúa con un elemento de documento. Por lo tanto, puede createElement(''a'') , establecer un href relativo y click() *, pero se ignorará el href base; adjúntelo al documento que contiene la base-href y funcionará.

En los otros navegadores, la base-href se toma como global por ventana y siempre se aplica. ¿Lo cual está bien? Parece que no está especificado. Los documentos de JavaScript originales solo dicen que location.hash (y por lo tanto, la location aplicada como una cadena):

representa una URL completa

Por lo tanto, establecerlo en una URL relativa parecería ser una operación indefinida.

(*: link.click () es un método no estándar compatible con IE y Opera)

lea la propiedad HREF de la etiqueta BASE y anteponga manualmente

Probablemente lo que haría, sí, si estás decidido a usar <base>.

Answer 2

Creo que quieres modificar window.location.pathname, no window.location. window.location es un objeto de ubicación, que tiene múltiples variables. Como resultado, los efectos de cambiarlo no están bien definidos. Sin embargo, window.location.pathname se define como la ruta relativa al host, que es lo que desea.

Si desea leer más sobre las muchas variables que puede cambiar en la ubicación de window, lo verificaría here . De acuerdo con la documentación de Mozilla, el cambio de cualquier variable en window.location debería volver a cargar la página con una nueva URL correspondiente a esos cambios.

Answer 3

Siempre puedes usar Vanilla JS :)

var href = document.getElementBytagname(''base'')[0].href

Espero que esto ayude.

Answer 4

Tuve el mismo problema hoy, después de algunas investigaciones, no pude encontrar ninguna manera de anular este problema en IE9, lo que es un requisito para mi proyecto, así que hice el siguiente enfoque (basado en jquery, pero es realmente fácil hacerlo en javascript simple).

href = function(url){
if ($("base").length > 0 ){
location.href= $("base").attr("href")+url;
}else{
location.href = url;
}
}

Y luego, cambio.

location.href= ''emp/start'' 

a

href(''emp/start'');

Answer 5

Usar el método de assign de window.location parece ser la respuesta más sencilla.

En lugar de

window.location = URI;

Estoy usando esto:

window.location.assign( URI ); 

que está haciendo lo correcto tanto en IE como en Firefox.

Answer 6

simplemente añada $(''base'').attr(''href'') antes del enlace. (usando jquery) o

document.getElementBytagname(''base'').href