사용자가 브라우저 기록으로 돌아갈 수 있는지 여부를 확인하는 방법
자바스크립트를 이용하여 이력이 있는지 없는지 확인하고 싶은데 브라우저에서 뒤로가기 버튼을 사용할 수 있는지 없는지를 의미합니다.
단답형:그럴수는 없어요.
기술적으로 정확한 방법이 있습니다. 이 방법은 속성을 확인하는 것입니다.
history.previous
하지만, 그것은 효과가 없을 것입니다.이 문제는 대부분의 브라우저에서 보안 위반으로 간주되며 일반적으로 정의되지 않은 상태로 반환된다는 것입니다.
history.length
다른 사람들이 제안한 재산이...
하지만 길이가 완전히 작동하는 것은 아닙니다. 왜냐하면 이 길이가 역사의 어디에 있는지를 나타내는 것은 아니기 때문입니다.또한 항상 같은 숫자로 시작하는 것은 아닙니다.예를 들어 랜딩 페이지가 설정되지 않은 브라우저는 0에서 시작하고 랜딩 페이지를 사용하는 다른 브라우저는 1에서 시작합니다.
대부분 다음을 호출하는 링크를 추가합니다.
history.back();
아니면
history.go(-1);
다시 돌아갈 수 없다면 링크를 클릭해도 아무 효과가 없을 것으로 예상됩니다.
레퍼러를 확인하는 다른 방법이 있습니다.첫 페이지에는 보통 빈 레퍼러가 표시됩니다.
if (document.referrer == "") {
window.close()
} else {
history.back()
}
내 코드는 브라우저가 한 페이지 뒤로 돌아가도록 하고, 실패하면 폴백 URL을 로드합니다.해시태그 변경도 감지합니다.
뒤로 버튼을 사용할 수 없을 때는 500ms 후에 fallback url이 로드되므로 브라우저는 이전 페이지를 로드할 시간이 충분합니다. url 뒤 을중는로중g는t로을window.history.go(-1);아직 않았기 에서 폴백 가지기에서백을다 URL게직다게d가백sel,을ee서eeoerlt직n
function historyBackWFallback(fallbackUrl) {
fallbackUrl = fallbackUrl || '/';
var prevPage = window.location.href;
window.history.go(-1);
setTimeout(function(){
if (window.location.href == prevPage) {
window.location.href = fallbackUrl;
}
}, 500);
}
제가 한 방법은 이렇습니다.
언로드 전' 이벤트를 사용하여 부울을 설정했습니다.그러면 '언로드 전'이 발생하는지 타임아웃을 설정했습니다.
var $window = $(window),
$trigger = $('.select_your_link'),
fallback = 'your_fallback_url';
hasHistory = false;
$window.on('beforeunload', function(){
hasHistory = true;
});
$trigger.on('click', function(){
window.history.go(-1);
setTimeout(function(){
if (!hasHistory){
window.location.href = fallback;
}
}, 200);
return false;
});
주요 브라우저(지금까지 테스트된 FF, Chrome, IE11)에서 작동하는 것으로 보입니다.
이것이 효과가 있는 것 같습니다.
function goBackOrClose() {
window.history.back();
window.close();
//or if you are not interested in closing the window, do something else here
//e.g.
theBrowserCantGoBack();
}
history.back()을 호출한 다음 window.close()를 호출합니다.브라우저가 역사로 돌아갈 수 있는 경우 다음 문장으로 이동할 수 없습니다.다시 돌아갈 수 없다면 창문을 닫을 겁니다.
그러나 URL을 입력하여 페이지에 도달한 경우 파이어폭스는 스크립트가 창을 닫는 것을 허용하지 않습니다.
프로젝트에 사용하는 토막글이 있습니다.
function back(url) {
if (history.length > 2) {
// if history is not empty, go back:
window.History.back();
} else if (url) {
// go to specified fallback url:
window.History.replaceState(null, null, url);
} else {
// go home:
window.History.replaceState(null, null, '/');
}
}
참고: 브라우저 히스토리를 관리할 때 History.js를 사용합니다.
history.length를 2번과 비교하는 이유는?
크롬의 시작 페이지는 브라우저 역사상 첫 번째 항목으로 집계되기 때문입니다.
의 은 거의 .history.length그리고 사용자의 행동:
- 사용자는 브라우저에서 빈 탭을 새로 연 다음 페이지를 실행합니다.
history.length = 2그리고 우리는 비활성화 하기를 원합니다.back()이 경우 사용자가 빈 탭으로 이동하기 때문입니다. - 사용자는 이전에 어딘가에 있는 링크를 클릭하여 새 탭의 페이지를 클릭합니다.
history.length = 1그리고 다시 한번 우리는 비활성화하기를 원합니다.back()방법. - 그리고 마지막으로 사용자는 몇 페이지를 다시 로드한 후 현재 페이지에 착륙합니다.
history.length > 2그리고 지금back()활성화할 수 있습니다.
참고: 사용자가 외부 웹사이트에서 링크를 클릭한 후 현재 페이지에 착지하는 경우를 생략합니다.target="_blank".
2 참고 2: document.referrer주소를 입력하여 웹사이트를 열 때와 웹사이트가 ajax를 사용하여 하위 페이지를 로드할 때는 비어 있으므로 첫 번째 경우에는 이 값 확인을 중단했습니다.
을 window.history.length한어기다r에도 항목이 포함되어 있기 입니다.window.history.forward()
그래서 당신은 아마window.history.length두 개 이상의 항목이 있지만 이력 백 항목은 없습니다.이것은 당신이 발사하면 아무 일도 일어나지 않는다는 것을 의미합니다.window.history.back()
뒤로 버튼을 사용할 수 있는지 직접 확인할 수 없습니다.를 보시면 .history.length>0, 그러나 현재 페이지 앞에 페이지가 있을 경우에도 해당됩니다.뒤로 버튼을 사용할 수 없다는 것은 다음과 같은 경우에만 확인할 수 있습니다.history.length===0.
만약 그게 부족하다면, 당신이 할 수 있는 일은 전화하는 것뿐입니다.history.back()페이지가 로드된 후에도 계속 로드되면 뒤로 버튼을 사용할 수 없습니다!물론 뒤로 가기 버튼을 사용할 수 있는 경우 페이지에서 이동한 지 얼마 안 된 것입니다.탐색을 취소할 수 없습니다.onunload이 실제로 것을 할 수은, 을 입니다 은 를 이 입니다 를 은 onbeforeunload 뜨게 , , , , , .그건 그럴 가치가 없어요.
사실, 역사를 가지고 무엇이든 한다는 것은 보통 정말 나쁜 생각입니다.기록 탐색은 웹 페이지가 아닌 브라우저 크롬용입니다."돌아가기" 링크를 추가하면 일반적으로 가치가 없는 사용자 혼란이 발생합니다.
history.length사용자가 역사로 돌아갈 수 있는지 여부를 보여주지 않으므로 쓸모가 없습니다.또한 브라우저마다 초기값 0 또는 1을 사용합니다. 이 값은 브라우저에 따라 다릅니다.
작업 해결책은 다음과 같이 사용하는 것입니다.$(window).on('beforeunload'이벤트 하지만 페이지가 ajax를 통해 로드되고 pushState를 사용하여 윈도우 히스토리를 변경하면 작동할지 확신할 수 없습니다.
그래서 다음 솔루션을 사용했습니다.
var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history back
if(currentUrl === window.location.href){
// redirect to site root
window.location.href = '/';
}
}, 100);
페이지에 갈 수 없음) 다른할 수 . 역사가 첫 페이지에 있을 때(뒤로 갈 수 없습니다).window.history.state할 수
if (window.history.state == null) {
//you cannot go back
}
설명서:
History.stateproperty는 이력 스택의 맨 위에 있는 상태를 나타내는 값을 반환합니다.이것은 행사를 기다릴 필요 없이 상태를 보는 방법입니다.
여기저기서 답을 쌓아가고 있습니다.제 생각에 더 결정적인 답은 새로운 탭의 새로운 페이지인지 확인하는 것입니다.
페이지의 기록이 하나 이상인 경우, 현재 페이지의 이전 페이지로 돌아갈 수 있습니다.그렇지 않다면 탭이 새로 열린 탭이고 새로운 탭을 만들어야 합니다.
와 다르게, 연결된 는 , 에, 하고 를 .referrer새 탭에는 레퍼러가 계속 표시됩니다.
if(1 < history.length) {
history.back();
}
else {
window.close();
}
저는 해결책을 찾으려고 노력하고 있었고 이것이 제가 얻을 수 있는 최고의 방법입니다(하지만 잘 작동하고 여기서도 발견한 가장 쉬운 해결책입니다).
저 같은 경우는 뒤로 버튼을 눌러 역사로 돌아가고 싶었지만, 사용자가 처음 연 페이지가 제 앱의 하위 페이지라면 메인 페이지로 돌아갑니다.
해결책은 앱이 로드되자마자 기록 상태에 대한 교체 작업을 수행했습니다.
history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)
이런 식으로 확인해 봐야 해요history.state.root◦ ◦ 을 대신 사실인 경우 기록을 대신 바꿉니다.
if(history.state && history.state.root)
history.replaceState( {root: true}, '', '/')
else
history.back()
저는 다음과 같은 방법을 생각해 냈습니다.언로드 전 이벤트를 활용하여 브라우저가 페이지를 떠나기 시작하는지 여부를 탐지합니다.특정 시간 내에 작동하지 않으면 폴백으로 리디렉션됩니다.
var goBack = function goBack(fallback){
var useFallback = true;
window.addEventListener("beforeunload", function(){
useFallback = false;
});
window.history.back();
setTimeout(function(){
if (useFallback){ window.location.href = fallback; }
}, 100);
}
를 사용하여 이 함수를 호출할 수 있습니다.goBack("fallback.example.org").
또 다른 SO 답변에서 가져온 완벽에 가까운 솔루션이 있습니다.
if( (1 < history.length) && document.referrer ) {
history.back();
}
else {
// If you can't go back in history, you could perhaps close the window ?
window.close();
}
를 사용할 때 작동하지 않는다는 보고가 있었습니다.target="_blank"Chrome에서는 잘 되는 것 같습니다.
Navigation API에는 도움이 될 수 있는 두 가지 속성이 있지만 현재 실험 중입니다.
can GoBack: https://developer.mozilla.org/en-US/docs/Web/API/Navigation/canGoBack
can Go Forward: https://developer.mozilla.org/en-US/docs/Web/API/Navigation/canGoForward
브라우저에 앞뒤 버튼이 있습니다.이 질문에 대한 해결책을 제시합니다. 그러나 이는 브라우저 순방향 작업에 영향을 미치고 일부 브라우저에 버그를 일으킬 것입니다.
브라우저가 열린 적이 없는 새 URL을 열면 history.length가 증가합니다.
해시를 변경할 수 있습니다.
location.href = '#__transfer__' + new Date().getTime()
표시되지 않은 URL을 가져오려면 history.length가 실제 길이를 가져옵니다.
var realHistoryLength = history.length - 1
그러나 항상 잘 작동하는 것은 아니며, 특히 URL이 빨리 점프할 때의 이유를 잘 모르겠습니다.
사용중입니다window.history내 사이트의 FAQ에 대해 Angular에서.
사용자가 FAQ를 종료하고 싶을 때마다 종료 버튼(뒤로 버튼 옆)을 클릭할 수 있습니다.
이 "출구" 전략에 대한 저의 논리는 엔트리 ID를 기반으로 하고 그 상태까지 주 수를 되돌리는 것입니다.
곧 입력:
enterState: { navigationId:number } = {navigationId: 1}
constructor() {
this.enterState = window.history.state
}
사용자가 FAQ를 탐색하는 척합니다.
그런 다음 사용자가 종료 버튼을 클릭하면 현재 상태를 읽고 델타를 계산합니다.
exitFaq() {
// when user started in faq, go back to first state, replace it with home and navigate
if (this.enterState.navigationId === 1) {
window.history.go((window.history.state.navigationId - 1) * -1)
this.router.navigateByUrl('/')
// non-angular
// const obj = {Title: 'Home', Url: '/'}
// window.history.replaceState(obj, obj.Title, obj.Url)
} else {
window.history.go(this.enterState.navigationId - window.history.state.navigationId - 1)
}
}
합니다. 그에는 , 는 FAQ 에 합니다 에는 도 가 에서 에는 합니다 가 state.navigationId이다 ㅇ1그리고 우리는 경로를 다시 설정하고 첫번째 상태를 교체하고 홈페이지를 보여주고 싶습니다. (이를 위해 저는 Angular 라우터를 사용하고 있지만, 당신은 사용할 수 있습니다.history.replaceState자신의 루트를 처리할 때도 마찬가지입니다.)
참고용:
이를 통해 다음과 같은 이점이 있습니다.
const prev = window.location.pathname;
window.history.back();
setTimeout(() => {
if (prev === window.location.pathname) {
// Do something else ...
}
}, 1000);
Angular를 사용하고 있습니다. 기록이 있는지 확인해야 합니다.trigger location.back(). 그렇지 않으면 상위 경로로 리디렉션됩니다.
https://stackoverflow.com/a/69572533/18856708 의 솔루션은 잘 작동합니다.
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private location: Location,
}
...
back(): void {
if (window.history.state === null) {
this.router.navigate(['../'], { relativeTo: this.activatedRoute });
return;
}
this.location.back();
}
이것이 제 해결책입니다.
function historyBack() {
console.log('back');
window.history.back() || window.history.go(-1);
if (!window.history.length) window.close();
var currentUrl = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history back
if(current === window.location.href){
console.log('History back is empty!');
}
}, 100);
}
function historyForward() {
console.log('forward');
window.history.forward() || window.history.go(+1);
var current = window.location.href;
setTimeout(function(){
// if location was not changed in 100 ms, then there is no history forward
if(current === window.location.href){
console.log('History forward is empty!');
}
}, 100);
}
다음 솔루션은 뒤로 탐색하여 탐색이 발생했는지 여부를 알려줍니다.
async function goBack() {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => reject('nowhere to go'), 100);
window.history.back();
const onBack = () => {
window.removeEventListener('beforeunload', onBack);
window.removeEventListener('popstate', onBack);
clearTimeout(timer);
resolve(true);
};
window.addEventListener('beforeunload', onBack);
window.addEventListener('popstate', onBack);
});
}
// usage
await goBack().catch(err => console.log('failed'));
작동 방식:
- 뒤로 이동합니다.
- 탐색 시 트리거할 이벤트 청취자를 다른 웹사이트 또는 동일한 사이트의 다른 페이지에 추가(SPA 웹사이트 등)
- 위의 이벤트가 100ms 내에 발생하지 않았다면 다시 돌아갈 곳이 없다고 추론합니다.
하세요에 하세요.goBack()는 비동기 함수입니다.
var fallbackUrl = "home.php";
if(history.back() === undefined)
window.location.href = fallbackUrl;
저는 결과를 얻기 위해 PHP를 조금 사용하고 있습니다.약간 녹슬었어요.그래도 될 겁니다.
<?php
function pref(){
return (isset($_SERVER['HTTP_REFERER'])) ? true : '';
}
?>
<html>
<body>
<input type="hidden" id="_pref" value="<?=pref()?>">
<button type="button" id="myButton">GoBack</button>
<!-- Include jquery library -->
<script>
if (!$('#_pref').val()) {
$('#myButton').hide() // or $('#myButton').remove()
}
</script>
</body>
</html>
var func = function(){ console.log("do something"); };
if(document.referrer.includes(window.location.hostname) && history.length-1 <= 1){
func();
}
else{
const currentUrl = window.location.href;
history.back();
setTimeout(function(){
currentUrl === window.location.href && func();
}, 100);
}
실제로 작동하는 JQuery 솔루션을 찾았습니다.
window.history.length == 1
이것은 Chrome, Firefox, Edge에서 작동합니다.윈도우 기록이 없을 때 당신이 개발한 웹 페이지의 뒤로가기 버튼을 숨기거나 제거하고 싶다면 위의 3개 브라우저의 최신 버전에서 나에게 적합한 다음 JQuery 코드를 사용할 수 있습니다.
$(window).load(function() {
if (window.history.length == 1) {
$("#back-button").remove();
}
})
해결책
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
}
}
설명
window.location.pathnameURI를 입니다.를 들면를어r를e어.https://domain/question/1234/i-have-a-problem줄을 줄 /question/1234/i-have-a-problem. 자세한 내용은 window.location에 대한 설명서를 참조하십시오.
의 입니다.split()그 URI의 줄입니다. URI를 , 에게 URI든을다줄그의ege줄l을e게li그든feos 그래서 우리가 우리의 이전 URI를 가져간다면, 우리는 다음과 같은 것을 가질 것입니다.["", "question", "1234", "i-have-a-problem"]. 자세한 내용은 String.prototype.split()에 대한 설명서를 참조하십시오.
에게 를 건 입니다.filter()백워드 슬래시에 의해 생성된 빈 문자열을 필터링하기 위해 여기에 있습니다.기본적으로 길이가 1보다 큰 fragment URI만 반환합니다(비어있지 않은 문자열).그래서 우리는 뭔가를 가지고 있을 거예요.["question", "1234", "i-have-a-question"] 작성될 수 다음과 같이 기록될 수 있습니다.
'use strict';
window.location.pathname.split('/').filter(function(fragment) {
return fragment.length > 0;
});
Array.prototype에 대한 설명서를 참조하십시오.filter() 및 Destructuring 할당에서 자세한 내용을 확인할 수 있습니다.
이제 사용자가 켜져 있는 동안 다시 돌아가려고 할 경우https://domain/, 는 if-state를 . if-state를 트리거하지 않습니다.window.history.back()사용자가 우리 웹사이트에 머물 수 있도록 하는 방법.이 URL과다은다 같습니다.[]고는는fh 길이의0,그리고.0 > 0 실패하는 입니다.그러므로, 묵묵히 실패하는 것입니다.물론, 당신이 원한다면 무언가를 기록하거나 다른 작업을 할 수도 있습니다.
'use strict';
function previousPage() {
if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
window.history.back();
} else {
alert('You cannot go back any further...');
}
}
한계
물론 브라우저가 History API를 지원하지 않는다면 이 솔루션은 작동하지 않습니다.이 솔루션을 사용하기 전에 설명서를 확인하여 자세한 내용을 확인하십시오.
이것이 작동하는지 여부는 확실하지 않으며 완전히 테스트되지는 않았지만 다음과 같이 시도해 보십시오.
<script type="text/javascript">
function goBack() {
history.back();
}
if (history.length > 0) { //if there is a history...
document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
} else {
die();
}
</script>
HTML 어딘가에:
<button value="Button1"> //These buttons have no action
<button value="Button2">
편집:
또한 이 페이지에서 찾은 표준 자바스크립트 브라우저 탐지 개체를 사용하여 브라우저가 백 기능을 지원하는 것을 조사하는 것이 가능합니다(모두 그렇게 한다고 생각합니다).그러면 뒤로 버튼과 호환되는 "좋은 브라우저"용과 "나쁜 브라우저"용으로 브라우저를 업데이트하라는 두 가지 다른 페이지를 가질 수 있습니다.
을 합니다.window.history.length는 00 ㎛ 와 같습니다.
언급URL : https://stackoverflow.com/questions/3588315/how-to-check-if-the-user-can-go-back-in-browser-history-or-not
'source' 카테고리의 다른 글
| 시간대별 또는 10분 단위로 시간을 분류하려면 어떻게 해야 합니까? (0) | 2023.09.09 |
|---|---|
| 팬더 데이터 프레임을 인덱스별로 정렬하는 방법은? (0) | 2023.09.09 |
| 고유 색인 또는 고유 키? (0) | 2023.09.09 |
| SQLPlus 스크립트를 통과하지 못한 매개 변수의 기본값 (0) | 2023.09.09 |
| ASP에서 httpOnlyCookies를 정확히 어떻게 구성합니까?NET? (0) | 2023.09.09 |