programing

JavaScript에서 이전 URL을 얻으려면 어떻게 해야 합니까?

yoursource 2022. 9. 30. 09:56
반응형

JavaScript에서 이전 URL을 얻으려면 어떻게 해야 합니까?

JavaScript에서 이전 URL을 얻을 수 있는 방법이 있습니까?다음과 같은 경우:

alert("previous url is: " + window.history.previous.href);

그런 게 있나요?아니면 그냥 쿠키에 저장할까요?앵커 없이 이전 URL에서 현재 URL로 이행할 수 있도록 하기 위해서만 알고 있으면 됩니다.

document.referrer

사용자가 링크를 클릭하여 현재 페이지로 이동하면(폼을 제출하여 주소 표시줄에 직접 입력하는 것이 아니라) 사용자가 마지막으로 방문한 페이지의 URL을 얻을 수 있는 경우가 많습니다.DOM 레벨 2에 의해 지정됩니다.여기 더 있어요.

window.history그럼 네비게이션은 허용되지만 보안 및 프라이버시상의 이유로 세션 내의 URL에는 액세스할 수 없습니다.보다 자세한 URL 기록을 사용할 수 있는 경우 방문한 모든 사이트에서 이전에 방문한 다른 모든 사이트를 볼 수 있습니다.

자신의 사이트를 이동하는 상태의 경우 쿠키 데이터, URL 매개 변수 또는 서버 측 세션 정보 중 하나를 사용하는 것이 더 취약할 수 있습니다.

URL을 모르는 상태에서 이전 페이지로 이동하려면 새로운 History api를 사용할 수 있습니다.

history.back(); //Go to the previous page
history.forward(); //Go to the next page in the stack
history.go(index); //Where index could be 1, -1, 56, etc.

그러나 HTML5 History API를 지원하지 않는 브라우저에서는 이력 스택의 내용을 조작할 수 없습니다.

상세한 것에 대하여는, 문서를 참조해 주세요.

서버에 대한 왕복이 아닌 앱/브라우저에서 라우팅이 이루어지는 웹 앱 또는 단일 페이지 애플리케이션(SPA)을 작성하는 경우 다음을 수행할 수 있습니다.

window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")

그런 다음 새 경로에서 다음 작업을 수행하여 이전 URL을 가져올 수 있습니다.

window.history.state.prevUrl // your previous url

document.referrer,, 든든상상릅 URL 릅릅릅릅 。

저는 2프레임으로 프레임셋을 설정해야 하는 어플리케이션을 가지고 있습니다.한쪽 프레임은 이미 알고 있고 다른 한쪽 프레임은 링크하고 있는 페이지입니다. 것 같다document.referrer프레임셋 문서에 실제 파일 이름을 전달할 필요가 없으므로 이상적입니다.

, 「」를 사용하는 는, 「」history.back()를 맨 아래 합니다.document.referrer그 결과 프레임셋이 사라지고 원래 시작 창으로 돌아갑니다.

이걸 이해하는데 시간이 좀 걸렸어요그래서 역사 배열에서document.referrer는 URL뿐만 아니라 레퍼러 창의 사양이기도 합니다.적어도 현시점에서는 그것이 내가 이해할 수 있는 최선의 방법이다.

<script type="text/javascript">
    document.write(document.referrer);
</script>

document.referrer는 목적에 부합하지만 IE9 이전 버전의 Internet Explorer에서는 작동하지 않습니다.

Chrome, Mozilla, Opera, Safari 등 다른 인기 브라우저에서도 사용할 수 있습니다.

React-world에서 오는 사람이 있다면, 저는 결국 다음과 같은 조합으로 제 사용 사례를 해결하게 되었습니다.history- 라이브러리, useEffect 및 localStorage

사용자가 새 프로젝트를 선택하는 경우:

  function selectProject(customer_id: string, project_id: string){
    const projectUrl = `/customer/${customer_id}/project/${project_id}`
    localStorage.setItem("selected-project", projectUrl)
    history.push(projectUrl)
  }

사용자가 다른 웹사이트에서 돌아왔을 때.localStorage에 뭔가 있으면 거기로 보내주세요.

  useEffect(() => {
    const projectUrl = localStorage.getItem("selected-project")
    if (projectUrl) {
      history.push(projectUrl)
    }
  }, [history])

사용자가 프로젝트를 종료하면 localStorage를 비웁니다.

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }

Node.js 및 Express를 사용하는 사용자는 현재 페이지의 URL을 기억하는 세션쿠키를 설정할 수 있습니다.이것에 의해, 다음의 페이지의 로드시에 레퍼러를 체크할 수 있습니다.다음 예시는 다음 명령어를 사용하는express-session미들웨어:

//Add me after the express-session middleware    
app.use((req, res, next) => {
    req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
    next();
});

그런 다음 다음과 같이 referrer cookie의 존재를 확인할 수 있습니다.

if ( req.session.referrer ) console.log(req.session.referrer);

이전 URL이 다른 웹 사이트이거나 세션이 클리닝되었거나 생성된 지 얼마 안 된 경우(처음 웹 사이트 로드)에는 사용할 수 없으므로 이 방법으로 레퍼러 쿠키가 항상 존재한다고 가정하지 마십시오.

저도 같은 문제가 있었습니다.SPA이 문제를 가장 쉽게 해결할 수 있는 방법은 다음과 같은 로컬 스토리지입니다.

필요한 URL을 로컬 저장소에 저장했습니다.

useEffect(() => {
const pathname = window.location.href; //this gives me current Url
localstorage.setItem('pageUrl',JSON.stringify(pathname))
}, []);

다음 화면(또는 몇 화면 후)에서 url을 가져와서 다음과 같이 대체할 수 있습니다.

useEffect(() => {
     const pathname = localstorage.getItem('pageUrl');
     return pathname ? JSON.parse(pathname) : ''
     window.location.href = pathname; //this takes prevUrl from local storage and sets it
}, []);

this.service.getWindow().history.back();

언급URL : https://stackoverflow.com/questions/3528324/how-to-get-the-previous-url-in-javascript

반응형