JavaScript에서 문서 리퍼러 가져오기

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 문서 리퍼러 가져오기
Muhammad Muzammil Hussain 2023년10월12일
JavaScript JavaScript DOM
  1. 문서 참조자
  2. JavaScript에서 문서 리퍼러 가져오기
JavaScript에서 문서 리퍼러 가져오기

이 문서에서는 다양한 예제와 함께 JavaScript 이벤트 및 함수를 사용하여 웹 페이지 실행 중에 프로그래밍 방식으로 문서 리퍼러를 가져오는 방법을 설명합니다.

문서 참조자

리퍼러는 현재 웹 페이지와 연결된 문서의 URL을 반환하는 DOM 읽기 전용 속성입니다. 현재 웹 페이지에 도달하면 탐색할 링크나 버튼을 클릭할 수 있습니다.

클라이언트측 애플리케이션에서 웹사이트 또는 웹페이지에 액세스하려면 문서의 URL 또는 경로가 필요합니다. 특정 웹 사이트, 웹 페이지 또는 서버에 업로드된 파일의 위치입니다.

특정 웹 사이트를 호출하고 호출하기 위해 사용자가 웹 브라우저 검색에 입력하는 문자열이 웹 사이트 URL입니다.

예를 들어 https://www.delftstack.com/은 응용 프로그램 계층 프로토콜(HTTP)을 사용하는 DelftStack의 전체 URL입니다.

속성 구문:

document.referrer;  // it will get us complete web URL with (HTTPS) like
                    // (https://www.delftstack.com/)

웹 사이트나 웹 페이지를 개발한다고 가정해 보겠습니다. 그리고 어떤 상황에서는 웹 사이트 실행 시간 동안 프로그래밍 방식으로 현재 문서 리퍼러를 찾아 사용해야 합니다.

JavaScript를 사용하여 처리할 수 있습니다. 사용자 지정 뒤로 탐색을 유지 관리할 때 유용할 수 있습니다.

JavaScript에서 문서 리퍼러 가져오기

HTML에서 DOM 리퍼러 속성은 읽기 전용이며 JavaScript 소스 내에서 현재 웹 페이지에 연결된 HTML 문서 또는 웹 페이지의 URL을 가져오는 데 사용됩니다. 사용자가 책갈피를 통해 페이지에 직접 액세스하는 경우 이 속성의 반환 값은 빈 문자열일 수 있습니다.

네트워크 계층 프로토콜(HTTPS)을 포함하여 DOM 리퍼러 속성을 사용하여 전체 URL을 얻을 수 있습니다.

기본 구문:

let refURL = document.referrer

예제 코드:

<!DOCTYPE html>

<html>

<body>

<h1>DelftStack learning</h1>

  <h2>JavaScript get document referrer example</h2>

<p>We have arrived from this link : </p>

<p id="para"></p>

<script>

let refUrl = document.referrer // get referrer and storing in variable

document.getElementById("demo").innerHTML = refUrl; // assign value to paragraph

</script>

</body>

</html>

예제 코드 설명:

  1. 위의 HTML 소스 코드에서 단락 요소 태그 <p></p>를 사용하고 해당 요소에 ID를 할당했습니다.
  2. <script></script> 태그 내에서 refUrl 변수를 선언하고 초기화했습니다.
  3. 이제 문서 URL을 얻기 위해 document.referrer 속성을 사용하고 반환 값을 변수에 저장했습니다.
  4. 마지막으로 document.getElementById() 메서드를 사용하여 결과 문자열을 단락에 표시했습니다.
  5. 위의 소스를 .html 확장자로 저장하고 결과를 볼 수 있습니다.

관련 문장 - JavaScript DOM