> 웹 프론트엔드 > JS 튜토리얼 > 웹페이지가 IFrame 내부에 로드되었는지 어떻게 감지할 수 있나요?

웹페이지가 IFrame 내부에 로드되었는지 어떻게 감지할 수 있나요?

Patricia Arquette
풀어 주다: 2024-12-05 16:06:18
원래의
745명이 탐색했습니다.

How Can We Detect If a Webpage Is Loaded Inside an IFrame?

다목적 웹페이지에 대한 Iframe 로딩 식별

웹 개발 영역에서 iframe 내에 로드되는 웹페이지와 직접 로드되는 웹페이지를 구별합니다. 브라우저 창은 종종 중요한 작업입니다. 이는 일반 웹사이트와 Facebook 내의 캔버스 페이지를 모두 렌더링하는 등 다양한 목적을 제공하는 것을 목표로 하는 애플리케이션에 특히 적합합니다. 이 문제를 해결하기 위해 우리는 웹페이지의 로딩 환경을 결정하는 방법을 탐색합니다.

Iframe 로딩 감지

웹페이지가 iframe 내에 로드되었는지 확인하기 위해 다음을 활용할 수 있습니다. 창 개체 간의 차이점. 특히 self 속성은 현재 창을 나타내고, top 속성은 가장 바깥쪽 창이나 프레임을 나타냅니다. 이 두 창 개체가 동일하지 않으면 웹페이지가 iframe 내에 로드된다는 의미입니다.

코드 구현

const inIframe = () => window.self !== window.top;
로그인 후 복사

이 함수는 다음을 나타내는 부울 값을 반환합니다. 페이지가 iframe 내부에 로드되었는지 여부. 참 값은 iframe 로드를 의미하고 거짓 값은 브라우저 창에서 직접 로드를 의미합니다.

Cross-Origin Access 업데이트

브라우저 보안 조치로 인해 다음에 대한 액세스가 제한될 수 있습니다. window.top은 동일 출처 정책으로 인해 발생합니다. 이 문제를 해결하기 위해 try-catch 블록을 사용할 수 있습니다.

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}
로그인 후 복사

이 업데이트 버전에서는 window.top에 대한 액세스 차단으로 인해 발생하는 예외가 iframe 로딩을 가정하여 처리됩니다.

결론

윈도우 개체 간의 차이점을 이해하여 웹 페이지가 다음과 같은지 여부를 안정적으로 감지하는 방법을 확립했습니다. iframe 내에 로드됩니다. 이러한 지식을 통해 개발자는 로딩 환경에 따라 동작을 조정하는 애플리케이션을 개발하여 다양한 플랫폼에서 원활한 기능을 보장할 수 있습니다.

위 내용은 웹페이지가 IFrame 내부에 로드되었는지 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿