찾다
웹 프론트엔드JS 튜토리얼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 = &#39;block&#39;; //默认让其隐藏,当referrer属性不为空时让其显示
}

Conclusion

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

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

관련 글:

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

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

javascript

document.referrer 사용법_javascript 팁

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구