javascript를 통해 렌더링될 때 IE에서 링크를 "방문됨"으로 표시하지 않음

javascript를 통해 렌더링될 때 IE에서 링크를 "방문됨"으로 표시하지 않음

저는 모든 콘텐츠가 jquery를 사용하여 아약스 포스트백을 통해 렌더링되는 사이트에서 일하고 있습니다.저는 Ben Alman의 해시 변경(http://benalman.com/projects/jquery-hashchange-plugin/) 을 사용하여 페이지 북마크, 뒤로 단추 등을 사용할 수 있는 해시 기록을 관리하고 있습니다.물론 IE 9를 제외한 모든 것이 완벽하게 작동합니다.IE에서 "방문한" 링크가 방문한 것으로 표시되지 않는 작은 문제가 있습니다.링크를 클릭한 후 새 내용이 로드되기 전에 링크가 보라색(방문)으로 변하는 것을 볼 수 있습니다.그러나 뒤로 단추를 클릭하면 링크가 방문한 적이 없는 것처럼 나타납니다.여기 제가 말하고 있는 것의 jfidle 예가 있습니다: http://jsfiddle.net/7nj3x/3/ .

다음은 jquery와 해시 변경 플러그인이 머리에 참조되어 있다고 가정한 jsfiddle 코드입니다.

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

IE 조건부 주석을 사용하여 특정 스타일을 로드할 수 있습니다.

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

클릭 동작을 반영하도록 숨겨진 입력 태그의 값을 설정하는 코드 블록을 IE에서만 사용하도록 설정하는 것은 어떻습니까?링크를 클릭하면 입력 태그의 값을 해당 링크 ID와 동일하게 설정하고 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;}

문서에 추가하기 전에 적절한 요소를 만들고 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(); 
});

CSS LVHA 역할을 고려해 보십시오. 이는 태그 유사 클래스의 순서가 중요하다는 것을 의미합니다.

이러한 클래스를 처음으로 정의합니다.

• A: 링크
• A: 방문했습니다.
• A:호버
• A: 활성

그래도 문제가 해결되지 않으면 다른 js 라우터(해시체인지)를 사용할 수 있습니다.https://github.com/flatiron/director 저는 이것을 많이 사용했고 많은 상황에서 완벽하게 작동합니다.

HTML5 히스토리 API를 사용하여 브라우저 히스토리를 위조하는 방법도 있습니다.이렇게 하면 브라우저 기록을 삭제한 후에만 링크가 '방문되지 않음' 상태가 됩니다.

이 유용한 페이지에 언급된 바와 같이:

위의 [...] 메서드는 요청된 자산이 없고 창이 동일한 페이지에 남아 있더라도 주소 표시줄의 URL을 '/hello'로 전환합니다.하지만 여기에 문제가 있습니다.뒤로 버튼을 누르면 이 기사의 URL로 돌아가지 않고 이전 페이지로 돌아갑니다.replaceState는 브라우저의 기록을 조작하지 않고 주소 표시줄의 현재 URL만 바꾸기 때문입니다.

이 페이지에서 언급한 것처럼 다음 작업을 수행해야 합니다.

history.pushState(null, null, hash);

 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]-->

이것은 ii의 보안 기능입니다.:vised의 기능은 CSS 악용을 방지하기 위해 많은 최신 브라우저에서 제한되었습니다.따라서 이 문제에 대한 해결 방법이 없습니다.

언급URL : https://stackoverflow.com/questions/18919388/ie-not-marking-links-as-visited-when-rendered-via-javascript