iframe 호출된 컴포넌트에서 호출한 url 주소 읽어오기

DONNIE·2023년 10월 25일
0

React

목록 보기
24/26

웹페이지 url 을 iframe으로 호출하여 보여주는 페이지가 있고, 본 페이지와 호출된데서 보여주는 페이지를 구분할 수 있는 상태값을 관리해야함

결과적으로 호출된 페이지에서는 호출한 페이지의 url주소를 읽을 수 없음

그래서 생각해낸 방법은, 호출하는 pathname을 다르게 해서 컴포넌트내에서 pathname으로 상태값을 확인하는 것

  • routes.tsx
    아래처럼 같은 컴포넌트를 호출하되, path 만 다르게 설정
{ path: '/conversation', exact: true, name: 'Conversation', element: Conversation },  
  { path: '/gbe-conversation', exact: true, name: 'Gbe-Conversation', element: Conversation }, 
  • Top.tsx
 useEffect(() => {
    const pathName = location.pathname;
    if (pathName.includes(VAR_CONVERSATION) || pathName.includes(VAR_TYPING)) {
      setIsOutside(true)
    }
    setPathname(pathName)
    return () => {
      setIsOutside(false);
    }
  }, [pathname])
profile
후론트엔드 개발자

0개의 댓글