교차 출처 Iframe 내의 요소에 CSS를 적용할 수 있나요?

CSS를 Iframe 내의 요소에 적용할 수 있나요?

웹 개발에서 iframe은 외부 콘텐츠를 페이지에 삽입하는 데 자주 사용됩니다. 그러나 iframe 내의 요소에 CSS를 적용하는 것은 까다로울 수 있습니다.

Iframe 요소 타겟팅

기본적으로 상위 문서에 적용된 CSS 규칙은 요소에 영향을 미치지 않습니다. iframe 내에서. 이는 iframe이 자체 CSS 컨텍스트가 있는 별도의 문서로 간주되기 때문입니다.

솔루션

동일 도메인

iframe과 상위 페이지가 동일한 도메인을 공유하는 경우 다음 기술을 사용할 수 있습니다.

• Javascript 삽입: JavaScript를 사용하여 하위 프레임에 CSS를 삽입합니다.
• 요소 격리: iframe 내의 요소를 격리하는 CSS 선택기를 사용합니다.

다른 도메인

iframe에 다른 도메인의 콘텐츠가 포함된 경우 도메인의 경우 상위 페이지에서 CSS를 적용할 수 없습니다. 이는 CORS(교차 원본 리소스 공유) 제한 때문입니다.

대안

iframe 요소에 CSS를 적용하는 것이 필수적인 경우 다음과 같은 대체 솔루션을 고려하세요.

• Shadow DOM: 상위 페이지 내에 Shadow DOM을 생성하고 그 안에 iframe 콘텐츠를 삽입합니다.
• 웹 구성 요소: 웹 구성 요소 사용 iframe에 삽입할 수 있는 캡슐화되고 사용자 정의 가능한 구성 요소를 생성합니다.
• 교차 출처 스타일링: iframe 소스 도메인의 CSS를 사용하거나 프록시 서버를 사용하여 교차 출처 스타일링을 용이하게 합니다.

위 내용은 교차 출처 Iframe 내의 요소에 CSS를 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!