event - javascript on hash change

IE no marca los enlaces como "visitados" cuando se representan a través de javascript

Question

Estoy trabajando con un sitio donde todo el contenido se procesa mediante abackback de ajax utilizando jquery. Estoy utilizando el hashchange de Ben Alman ( http://benalman.com/projects/jquery-hashchange-plugin/ ) para administrar el historial de hash que me permite marcar páginas, usar el botón de retroceso, etc. Todo funciona perfectamente en todo, pero IE 9 por supuesto. En IE hay un pequeño problema con los enlaces "visitados" que no están marcados como visitados. Puede ver que el enlace se vuelve violeta (visitado) durante una fracción de segundo después de hacer clic en él antes de que se cargue el nuevo contenido. Pero una vez que haces clic en el botón Atrás, el enlace aparece como si nunca se hubiera visitado. Aquí hay un ejemplo jfiddle de lo que estoy hablando: http://jsfiddle.net/7nj3x/3/

Aquí está el código jsfiddle, suponiendo que tiene jquery y el complemento hashchange al que se hace referencia en la cabecera:

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    alert("Hash changed to:"+location.hash);  
    var hash = location.hash;
    // Set the page title based on the hash.
    document.title = ''The hash is '' + ( hash.replace( /^#/, '''' ) || ''blank'' ) + ''.'';
    //simulate body being rendered by ajax callback 
      if(hash == ""){  
        $("body").html("<p id=''nav''><a href=''#test1''>test 1</a> <a href=''#test2''>test 2</a> <a href=''#test3''>test 3</a></p>");
      }
      else{
        $("body").html("Right click within this pane and select /"Back/".");  
      }
  })
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange(); 
});

Answer 1

Tal vez si crea los elementos adecuados y crea un segmento DOM antes de anexarlo al documento.

No estoy seguro de que funcione, no puedo probarlo aquí, pero aquí va mi intento de adaptar su código.

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    alert("Hash changed to:"+location.hash);  
    var hash = location.hash;
    // Set the page title based on the hash.
    document.title = ''The hash is '' + ( hash.replace( /^#/, '''' ) || ''blank'' ) + ''.'';
    //simulate body being rendered by ajax callback 
      if(hash == ""){  
        $("body").html(
          $("<p>").id("nav")
            .append($("<a>")
              .attr("href","#test1")
              .text("teste 1"))
            .append($("<a>")
              .attr("href","#test2")
              .text("test 2"))
            .append($("<a>")
              .attr("href","#test3")
              .text("test 3"))
        );
      }
      else{
        $("body").text("Right click within this pane and select /"Back/".");  
      }
  })
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange(); 
});

Answer 2

¿Por qué no configurar un bloque de código solo para ser utilizado por IE que establece el valor de una etiqueta de entrada oculta para reflejar el comportamiento del clic? Si se hace clic en un enlace, puede establecer el valor de la etiqueta de entrada igual a esa identificación de enlace y le permite actualizar la clase de elementos para reflejar el cambio.

HTML if IE
<input type="hidden" id="clicked_link" />


JQuery JS if IE
$(function() {
    $(a).click(function() {
        $(this).attr(''id'').addClass(''visited_link_class'');
    });
});

CSS
.visited_link_class { color:#your color;}

Answer 3

Esta es una característica de seguridad en ie. La funcionalidad de: visited ha sido restringida en muchos navegadores modernos para evitar el uso de CSS. Por lo tanto, no hay solución para este problema.

Answer 4

Intente considerar los roles css LVHA, lo que significa que importa el orden de una pseudo clase de una etiqueta.

Primera vez para definir esas clase:

• Un enlace
• A: visitado
• A: hover
• A: activo

Si esto aún no resolvió su problema, puede usar otro enrutador js (hashchange): https://github.com/flatiron/director Utilicé este mucho y funciona perfectamente en muchas situaciones.

Answer 5

Una opción sería también falsificar el historial del navegador utilizando la API de historial de HTML5. De esta forma, solo después de eliminar el historial del navegador, el enlace será "no visitado".

Como dije en esta útil página :

[...] el método anterior cambia la URL en la barra de direcciones con ''/ hola'' a pesar de que no se soliciten activos y que la ventana permanezca en la misma página. Sin embargo, hay un problema aquí. Al presionar el botón Atrás, veremos que no volvemos a la URL de este artículo, sino que volveremos a la página en la que estábamos antes. Esto se debe a que replaceState no manipula el historial del navegador, simplemente reemplaza la URL actual en la barra de direcciones.

Así como también se menciona en esa página, tendrás que hacer una:

history.pushState(null, null, hash);

Answer 6

 You can simply use IE conditional comments to load a specific style:    
<!--[if IE]>
      a:visited {
         padding-left: 8px;
         background: url(images/checkmark.gif) no-repeat scroll 0 0;
    }
<![endif]-->

Answer 7

Simplemente puede usar los comentarios condicionales de IE para cargar un estilo específico:

<!--[if IE]>
  a:visited {
     padding-left: 8px;
     background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->