IE не маркирует ссылки как "посещенные" при визуализации через javascript

Я работаю с сайтом, где все содержимое передается с помощью ajax postbacks с помощью jquery. Я использую Ben Alman hashchange (http://benalman.com/projects/jquery-hashchange-plugin/), чтобы управлять историей хэша, которая позволяет мне закладок страниц, использовать кнопку "Назад" и т.д.... Все работает отлично на всем но IE 9, конечно. В IE есть небольшая проблема с "посещенными" ссылками, которые не помечены как посещенные. Вы можете видеть, что ссылка становится фиолетовой (посещенной) в течение секунды секунды после нажатия на нее до загрузки нового содержимого. Но как только вы нажмете кнопку "Назад", ссылка появится так, как будто ее никогда не посещали. Вот пример того, о чем я говорю: http://jsfiddle.net/7nj3x/3/

Вот код jsfiddle, предполагающий, что у вас есть jquery и плагин hashchange, упомянутый в голове:

$(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(); 
});

Ответ 1

Вы можете просто использовать условные комментарии IE для загрузки определенного стиля:

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

Ответ 2

Почему бы не настроить блок кода, который будет использоваться только IE, который задает значение скрытого входного тега для отражения поведения кликов. Если щелкнуть ссылку, вы можете установить значение входного тега, равное этому идентификатору ссылки, и позволить вам js обновить класс элементов, чтобы отразить это изменение.

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

Ответ 3

Возможно, если вы создадите правильные элементы и создаете сегмент DOM, прежде чем добавлять его в документ.

Не уверен, что это сработает, не могу проверить его здесь, но здесь идет моя попытка адаптировать ваш код.

$(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(); 
});

Ответ 4

Попробуйте рассмотреть роли css LVHA, что означает, что порядок псевдокласса тега имеет значение.

Первый раз для определения этого класса:

A: ссылка
A: посетил
A: hover
А: активный

Если это еще не решило вашу проблему, вы можете использовать другой js-маршрутизатор (hashchange): https://github.com/flatiron/director Я использовал это много, и он отлично работает во многих ситуациях.

Ответ 5

Параметр должен также подделывать историю браузера с помощью API истории HTML5. Таким образом, только после удаления истории браузера ссылка будет "не показана".

Как сказано на этой полезной странице:

[...] выше выдает URL-адрес в адресной строке с помощью '/hello', несмотря на отсутствие требований к активам и оставшееся окно на той же странице. Но проблема здесь. При ударе по спине мы найдем, что мы не вернемся к URL этой статьи, но вместо этого мы вернемся к той странице, на которой мы были раньше. Это потому что replaceState не управляет историей браузера, это просто заменяет текущий URL-адрес в адресной строке.

Так, как и упоминалось на этой странице, вам нужно будет:

history.pushState(null, null, hash);

Ответ 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]-->

Ответ 7

Это функция безопасности, то есть. Функциональность: visit была ограничена во многих современных браузерах, чтобы предотвратить эксплойт CSS. Следовательно, для этой проблемы нет обходного пути.