JavaScript로 뒤로 버튼을 관리하는 방법

나는 하나의 페이지로 된 페이지를 <div> 태그로 이동, 숨기기, 요법으로 만들었습니다. 뒤로 버튼으로 내 div를 실행하는 기능을 제어 할 수 있어야합니다.JavaScript로 뒤로 버튼을 관리하는 방법

나는 이것을 수행하는 방법을 전혀 연구하지 않고 this 문서를 발견했습니다.

이 코드는 내 사이트에 포함되어 있으며 사용자가 doclick() 함수가 첨부 된 버튼을 클릭 할 때마다 해시 태그 번호가 증가하면서 URL을 업데이트하는 데 적합합니다.

var times = 0; 
function doclick() { 
    times++; 
    location.hash = times; 
} 
window.onhashchange = function() {  
    if (location.hash.length > 0) {   
     times = parseInt(location.hash.replace('#',''),10);  
    } else { 
     times = 0; 
    } 
    document.getElementById('message').innerHTML =  
     'Recorded <b>' + times + '</b> clicks'; 
}

는 내가 그래도 난 무엇을해야하는 방법을 볼 수있을만큼 경험 있지 않다

<div onClick="edit(); doclick()">Editorial</div> 
<div onClick="vfx(); doclick()">VFX</div> 
<div onClick="audio(); doclick()">Audio</div> 
<div onClick="color(); doclick()">Color</div>

에서는, doClick 호출 내 사이트에 4 개() 버튼을 가지고있다.

이제 모든 클릭을 새로운 해시로 저장 했으므로이 데이터를 사용하여 설정 한 특정 기능을 어떻게 호출 할 수 있습니까? 아니면 단지 # 1, # 2 등을 추가하는 대신 더 좋은 방법으로 조정할 수 있습니다. URL에는 페이지 이름이 반영됩니다. www.site.com/vfx와 마찬가지로 - 그 정보를 사용하여 함수를 호출 할 수 있습니다.

사용 예 :

우리는 홈 페이지 www.site.com
사용자에 시작이 사설 BTN을 클릭 - div의 문안에에, 밖으로 스위치, URL은 www.site.com/editorial 읽고
사용자 클릭 VFX BTN - divs 스위치 아웃, 이제 VFX 페이지.
사용자가 버튼을 다시 클릭 www.site.com/vfx URL 읽기 - 지금 같은 기능 편집()를 호출하고 HTML5와 함께

출처

2017-10-05 NewCodeMan

이게 도움이 될 것 같아 - https://stackoverflow.com/questions/1844491/ 요격하다 통화 중 - 버튼 - 인 - 내 - 아약스 - 응용 - i-dont-want-it-to-to-back – sahutchi

을 www.site.com/editorial로 되돌아 가서, 열어 본 API가있다 브라우저의 상태를 변경하고 URL 경로 이름을 변경할 수는 있지만 페이지를 다시로드하지 마십시오. forward 또는 backward 버튼을 클릭하면 페이지가 다시로드 된 것처럼 작동하지만 아니.

이 예를 확인하시기 바랍니다 : 당신이 클릭 할 때

var target = document.querySelector(".content"); 

//Initiate the state. 
history.replaceState({ 
    title: document.title, 
    content: target.innerHTML, 
}, document.title); 

//When the buttons forward or backward is clicked, change the state of 
//browser, and replace the target's content. 
window.onpopstate = function(e) { 
    if (e.state) { 
     document.title = e.state.title; 
     target.innerHTML = e.state.content; 
    } 
}; 

//Assuming you're using Ajax to load remote data. 
$.get("/something", function(data){ 
    history.pushState({ 
     title: data.title, 
     content: data.content, 
    }, data.title, data.url); 
    document.title = data.title; 
    target.innerHTML = data.content; 
});

는 아직도 내가 원격 데이터를로드하는 웹 소켓을 사용하지만, 내 최근 프로젝트의 웹 사이트를 확인하시기 바랍니다 무슨 말인지 이해하지 않는 경우를, 당신은 볼 수 있습니다 문서 항목은 페이지가 다시로드되지 않지만 내용과 URL은 수정됩니다.

http://cool-node.hyurl.com:3000/Docs

그리고 편의를 위해, 나는 하나의 플러그인이 API를 포장 한, 당신은 당신이 실제로 필요하지 않은, 그런데,

https://github.com/Hyurl/soft-loader

에서 확인해 또는 수 원격 데이터를 다시로드하는 것은 단지 예일 뿐이므로 <body> 등 원하는 곳 어디서나 원하는 콘텐츠를 저장할 수 있습니다.

출처

2017-10-05 05:17:01

JavaScript로 뒤로 버튼을 관리하는 방법

답변

관련 문제