div를 페이지 변경으로 열어 두시겠습니까?

Question

저는 div의 'footer'를 페이지 하단에두고 페이지 변경을 통해 열어 둡니다. 필자는 JQuery의 .load 함수를 메인 콘텐츠 div에 사용하여이 방법을 사용했지만, 다른 페이지로 이동하면 URL은 그대로 유지됩니다. 링크가 URL을 변경하지 않고 div를 열린 상태로 유지할 수있는 방법이 있습니까? 나는 div를 통해 음악을 재생할 계획이므로 페이지 스위치 사이를 닫을 수 없거나 음악이 멈추거나 다시 버퍼해야합니다.

Answer 1

는 다음을 사용하여 HTML5로이 작업을 수행 할 수 있습니다

window.history.pushState(obj, "Title", url); 

당신의 .load() 전화 후.

표시되는 URL이 통화중인 주소와 일치하도록 변경되지만 동일한 도메인에 속한 URL 만 허용됩니다.

는 비 HTML5 브라우저를 지원하려면 https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 2

당신은 프레임과 해시 URL을 사용해야합니다 참조하십시오. 나는 구식의 프레임 셋을 사용할 것이다. (나는 실제로 프레임 셋을 제안하고 있다고 믿을 수 없다. 그것은 나쁜 습관으로 간주되며, 아마도 11 년 후에 이런 코드를 작성하지는 못했지만,이 경우에는 실제로 올바른 솔루션처럼 보인다. iframe을 사용할 수있다. 하지만 나는 프레임이 실제로 더 의미가 생각하는)

<frameset border="0" rows="*,100"> 
    <frame src="/mainPage" id="content" /> 
    <frame src="/footer" id="footer" /> 
</frameset> 

사용 Ben Alman의 hashchange plugin,이 같은 스크립트를 사용하여 페이지 탐색 관리 :.

$(function() { 
    $("frame").load(function() { 
     document.title = w.document.title; 
     var links = $("a[href]", this.contentWindow.document); 
     links.attr("target", "_top"); 
     links.click(function (e) { 
      if (this.hostname == location.hostname) { 
       e.preventDefault(); 
       var path = this.pathname.replace(/^[^\/]/, "$&/"); 
       location.hash = "#" + path + this.search + this.hash; 
      } 
     }); 
    }); 
    var w = $("#content")[0].contentWindow; 
    $(window).hashchange(function() { 
     var hash = location.hash.substr(1) || "/mainPage"; 
     var contentLoc = w.location.pathname + w.location.search + w.location.hash; 
     if (hash.toLowerCase() != contentLoc.toLowerCase()) { 
      w.location.replace(hash); 
     } 
    }).trigger("hashchange"); 
}); 

데모 : http://jumpingfishes.com/framed/

을

n 프레임 대신, AJAX를 사용하여 컨텐트를 다시로드 할 수 있지만 프레임을 더 빨리 구현할 수 있습니다.