HTML iframe 태그를 사용하여 다른 사이트에서 컨텐츠를 포함시키는 방법은 무엇입니까?

, 너비, 높이 및 스타일과 같은 속성을 추가 할 수 있습니다 = "테두리 : 없음;" 외관을 제어하기 위해; 반응 형 레이아웃을 달성하려면 백분율을 통해 크기를 설정하거나 컨테이너를 사용하여 패딩과 절대 포지셔닝을 결합하여 종횡비를 유지하면서 크로스 도메인 제한, 로딩 성능, SEO 영향 및 보안 정책에주의를 기울일 수 있습니다. 일반적인 용도로는 맵, 타사 양식, 소셜 미디어 컨텐츠 및 내부 시스템 통합이 포함됩니다.

웹 개발에서 다른 웹 사이트의 내용을 자신의 페이지에 포함시키려는 경우 <iframe></iframe> 태그는 간단하고 간단한 방법입니다. 페이지에서 다른 페이지를 엽니 다.

기본 사용

<iframe></iframe> 사용하는 가장 기본적인 방법은이 태그를 작성하고 src 속성을 통해 포함하려는 URL을 지정하는 것입니다.

 <iframe src = "https://example.com"> </iframe>

이런 식으로 브라우저는 현재 페이지의 example.com에서 컨텐츠를 표시합니다. 기본적으로 IFRAME에는 테두리가 있습니다. 테두리를 원하지 않으면 style="max-width:90%" 추가 할 수 있습니다. 그것을 제거합니다.

일반적인 설정에는 다음과 같은 폭과 높이도 포함됩니다.

 <iframe src = "https://example.com"width = "600"height = "400"style = "테두리 : 없음;"> </iframe>

Iframe의 크기 및 반응 형 레이아웃을 제어합니다

iframes는 기본적으로 고정 크기이지만 최신 웹 디자인에서는 반응 형 레이아웃이 더 인기가 있습니다. CSS를 사용하여 다른 장치의 화면에 자동으로 적응할 수 있습니다.

일반적인 방법은 비율을 사용하여 폭을 설정하거나 컨테이너를 반응 형 처리를 위해 결합하는 것입니다.

 <div style = "위치 : 상대; 패딩-바닥 : 56.25%;">
  <iframe 
    src = "https://example.com" 
    스타일 = "위치 : 절대; 상단 : 0; 왼쪽 : 0; 너비 : 100%; 높이 : 100%; 테두리 : 없음;">
  </iframe>
</div>

이 트릭은 "패딩 백분율"을 사용하여 종횡비 (예 : 16 : 9)를 유지하며, 이는 비디오 또는지도와 같은 컨텐츠를 포함시키는 데 적합합니다.

미디어 쿼리를 사용하여 다른 화면의 iframe 크기를 조정할 수도 있습니다.

• 데스크탑에 더 큰 크기를 표시하십시오
• 모바일에서 너비를 줄이거 나 비율을 조정하십시오

안전 및 호환성 고려 사항

iframes는 편리하지만 다음에주의를 기울여야 할 사항이 있습니다.

• 크로스 도메인 제한 : 다른 웹 사이트의 컨텐츠가 포함 된 경우 일반적으로 JavaScript를 통해 해당 콘텐츠를 조작 할 수 없습니다.
• 로드 성능 : Iframes는 추가 리소스를 요청하여 페이지 로딩 속도에 영향을 줄 수 있습니다.
• SEO 충격 : 검색 엔진은 Iframes의 컨텐츠에 특별한주의를 기울이지 않으며 SEO에는 도움이되지 않습니다.
• 보안 정책 : 일부 웹 사이트에는 X-Frame-Options 또는 Content-Security-Policy 이 있으며, 이는 IFRAME에 포함되지 않습니다.

따라서 사용하기 전에 대상 웹 사이트를 중첩 할 수 있는지 확인하는 것이 가장 좋습니다. 상대방이 허용하지 않으면 iframe이 비어 있거나 오류를보고 할 수 있습니다.

공통 사용 예

일부 일반적인 iframe 사용 시나리오에는 다음이 포함됩니다.

• 맵핑 (예 : Google지도)
• 타사 양식 삽입 (예 : Google Forms, TypeForm)
• 광고 또는 소셜 미디어 컨텐츠 표시 (예 : Twitter 트윗, Facebook 게시물)
• 내부 시스템 통합 (예 : 보고서, 대시 보드)

예를 들어 Google지도를 포함시킵니다.

 <iframe 
  src = "https://www.google.com/maps/embed?pb= !1M18! 492927975973! 2M3! 1F0! 2F0! 3F0! 3M2! 1I1024! 2I768! 4F13.1! 3M3! 1M2! 1S0X8085809C8A0D0D2B : 0x3E82C4DA0C5DDBA0! 2SSAN Francisco, CA! 5E0! 3M2! 1SEN! 2SUS! 4V1614820000000! 5M2! 1SEN! 2SUS "
  너비 = "100%" 
  높이 = "450" 
  스타일 = "국경 : 0;" 
  allowfullscreen = "">
</iframe>

기본적으로 그게 다야. iframe은 기본이지만 실용적인 HTML 요소입니다. 사용 방법에주의를 기울이는 한 컨텐츠 임베딩 작업을 잘 완료 할 수 있습니다.

위 내용은 HTML iframe 태그를 사용하여 다른 사이트에서 컨텐츠를 포함시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!