2013-08-21 2 views
0

사용자가 링크를 클릭 할 때 일부 콘텐츠를 표시하는 자바 스크립트 기능이 있습니다.콘텐츠가 iframe에로드 될 때 브라우저 백 버튼이 작동하지 않습니다.

function showContent(filename){ 
    var oldcontent = $('#content').html(); 
    var srcUrl = getSourceUrl(filename); 
    $('#content').html(oldcontent + '<iframe style="width:100%;height=100%;display:block;" src="'+srcUrl+'" />'); 
} 

컨텐츠가 IFrame을에로드되어 있기 때문에, URL이 변경되지 않습니다 내가 링크를 브라우저의 뒤로 버튼을 사용하던 이전 페이지로 돌아갈 수 없습니다. 나는 초보자이며 이것과 같은 무언가 (바보 같은 실험)을 시도했다. 즉, '# page2'를 URL에 추가하지만 사용자가 뒤로 버튼을 클릭하면 아무 일도 일어나지 않습니다.

var oldcontent = $('#content').html(); 
var srcUrl = getSourceUrl(filename); 
location.href = location.href + '#page2'; 
$('#content').html(oldcontent + '<iframe style="width:100%;height=100%;display:block;" src="'+srcUrl+'" />'); 

사람은 뒤로 버튼 기능을 사용하려면이 방법 뭐가 잘못 말해 주시겠습니까?

+1

오래된 브라우저에서 hashchange' 이벤트 '로 봐와'history.pushstate'을. –

답변

0

이 시도 : 새로운 브라우저에서

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Hash Test</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id='message-container'></div> 
    </body> 
    <script> 
    var messages = ["Hello. Click anywhere on the page.", "How are you?", "I hope you're fine.", "Have a nice day and hit the back button."]; 
    var currentMessage = 0; 
    var lastMessage = messages.length - 1; 

    $(document).click(function() { 
     nextMessage(); 
    }); 

    function nextMessage() { 
     if (currentMessage < lastMessage) { 
     currentMessage++; 
     updateHash(); 
     } 
    } 

    function displayMessage() { 
     $("#message-container").text(messages[currentMessage]); 
    } 

    function updateHash() { 
     window.location.hash = "#message" + currentMessage; 
    } 

    $(window).on("hashchange", function() { 
     if (/message\d+/.test(window.location.hash)) { 
     currentMessage = window.location.hash.match(/message(\d+)/)[1]; 
     displayMessage(); 
     } 
    }); 

    updateHash(); 
    </script> 
</html>