JavaScript의 document.referrer 사용에 대한 자세한 답변(코드 첨부)

이 글에서는 주로 JavaScript에서 document.referrer의 사용법을 소개합니다. 이 글에서는 샘플 코드를 통해 자세히 소개하고 있으며, 필요한 친구는 아래에서 살펴볼 수 있습니다.

머리말

JavaScript에서 문서 개체에는 웹 페이지 요청과 관련된 세 가지 속성인 URL, 도메인 및 리퍼러를 포함하여 많은 속성이 있습니다.

URL 속성에는 페이지의 전체 URL이 포함되고, domain 속성에는 페이지의 도메인 이름만 포함되며, Referrer 속성에는 현재 페이지에 링크된 페이지의 URL이 저장됩니다.

처음 두 개는 이해하기 쉽고 리퍼러 속성은 단순히 이전 페이지의 URL입니다. 그렇다면 이 속성의 구체적인 용도는 무엇입니까?

H5 페이지에서는 다음과 같이 헤더에 이전 페이지로 돌아가기 버튼을 추가하는 경우가 많습니다.

페이지 헤더

이전 페이지로 돌아가려면 왼쪽에 있는 요소를 클릭하세요. JS 코드를 작성하세요:

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面，也可以写成history.go(-1)
};

아니면 너무 많은 JS를 작성하지 않고 a 태그를 사용하여 반환 버튼 요소를 직접 나타내는 더 간단한 방법이 있습니다:

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

咦? 위에서 너무 많이 말했지만 아직 그 용도가 무엇인지 언급하지 않았습니다! 위 내용은 단지 예시일 뿐이니 본론으로 들어가겠습니다~~document.referrer

위 내용은 기본적으로 이전 페이지로 돌아가는 기능을 구현한 것 같지만, 고려하지 못한 상황이 하나 있습니다 계정(우리 프로그래머들은 여전히 ​​더 엄격해야 합니다.) 즉, 해당 페이지가 다른 페이지를 통해 입력되는 것이 아니라 다른 사람과 공유되는 경우에는 어떻게 될까요? 그런 다음 버튼을 클릭해도 현재 기록 개체에 기록 기록이 없기 때문에 아무런 반응이 발생하지 않습니다. 이는 브라우저 창이 열릴 때 탐색되는 첫 번째 페이지임을 의미합니다.

사용자 경험을 최적화하기 위해 여기에는 일반적으로 두 가지 솔루션이 있습니다. 하나는 첫 페이지를 열 때 이전 페이지로 돌아가기 버튼을 표시하지 않는 것이고, 다른 하나는 바로 클릭하여 해당 웹사이트의 홈페이지로 이동하는 것입니다. 이를 통해 제품 요구 사항에 따라 적절한 솔루션을 선택할 수 있습니다.

첫 번째 옵션이 선택되었다고 가정하면 다음과 같이 JS를 작성할 수 있습니다.

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}

Conclusion

실제로 현재 페이지가 다음 페이지인지 확인하는 방법은 처음에 열린 사용자는 리퍼러를 판단하는 것뿐만 아니라 속성 메소드도 History.length가 0인지 여부를 판단할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 글:

javascript의 document.referrer브라우저 지원, 실패 요약_기본 지식

JavaScript의 document.referrer테스트 결과_다양한 브라우저의 기본 지식

javascript

document.referrer 사용법_javascript 팁

위 내용은 JavaScript의 document.referrer 사용에 대한 자세한 답변(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!