iframe, 포함 및 객체 요소의 차이점
HTML5는 여러 가지 임베디드 컨텐츠 요소를 정의하는데, 이는 조감도에서 거의 동일하다는 점과 매우 유사 해 보입니다.
무엇 사이의 실제 차이 iframe
, embed
그리고 object
?
타사 사이트에서 HTML 파일을 임베드하려는 경우 이러한 요소 중 어떤 요소를 사용할 수 있으며 어떻게 다른가요?
<iframe>
iframe 요소는 중첩 된 브라우징 컨텍스트를 나타냅니다. HTML 5 표준- "
<iframe>
요소"
주로 다른 도메인 또는 하위 도메인의 리소스를 포함하는 데 사용되지만 동일한 도메인의 콘텐츠를 포함하는 데 사용될 수도 있습니다. <iframe>
'라이브 및 부모 문서와 통신 할 수의 강도는 임베디드 코드는 점이다'.
<embed>
HTML 5로 표준화되기 전에 비표준 태그로 모든 주요 브라우저에서 구현되었습니다. HTML 5 이전의 동작은 다를 수 있습니다 ...
embed 요소는 외부 (일반적으로 HTML이 아닌) 응용 프로그램 또는 대화 형 내용에 대한 통합 지점을 제공합니다. ( HTML 5 표준 -는 "
<embed>
요소" )
브라우저 플러그인의 컨텐츠를 임베드하는 데 사용됩니다. 이에 대한 예외는 표준에 따라 다르게 처리되는 SVG 및 HTML입니다.
임베드 된 컨텐츠로 수행 할 수있는 작업과 수행 할 수없는 작업에 대한 세부 사항은 해당 브라우저 플러그인에 달려 있습니다. 그러나 SVG의 경우 다음과 같은 방법으로 상위에서 임베디드 SVG 문서에 액세스 할 수 있습니다.
svg = document.getElementById("parent_id").getSVGDocument();
포함 된 SVG 또는 HTML 문서 내부에서 다음을 통해 부모에게 도달 할 수 있습니다.
parent = window.parent.document;
임베디드 HTML의 경우 부모님 (내가 찾은)으로부터 임베디드 문서를 얻을 수있는 방법이 없습니다.
<object>
<object>
요소는 중첩 검색 콘텍스트로서, 리소스의 종류에 따라, 하나의 이미지로 처리되며, 외부 자원을 나타낼 수 있고, 또는 외부 자원으로 플러그인에 의해 처리된다. ( HTML 5 표준 -는 "<object>
요소" )
결론
SVG 또는 정적 무언가를 포함하지 않는 한 아마도 사용하는 것이 가장 좋습니다 <iframe>
. SVG 사용을 포함하려면 <embed>
(정확하게 기억 <object>
한다면 스크립트를 사용하지 않습니다 †). 솔직히 나는 <object>
오래된 브라우저 나 플래시 (내가 작동하지 않는)가 아닌 한 왜 사용하는지 모르겠다 .
† 아래 의견에서 지적한 바와 같이; 스크립트 <object>
가 실행되지만 상위 및 하위 컨텍스트는 직접 통신 할 수 없습니다. 함께 <embed>
하면 반대로 부모와 그에서 아이의 컨텍스트를 얻을 수 있습니다. 이는 부모에서 스크립트를 사용하여 자식 등을 조작 할 수 있음을 의미합니다. 해당 부분은 JavaScript postMessage API 와 같은 다른 메커니즘을 설정 <object>
하거나 사용할 수없는 경우 <iframe>
가 있습니다 .
사용해야 object
하는 한 가지 이유 iframe
는 객체가 객체 크기에 맞게 포함 된 컨텐츠의 크기를 조정하기 때문입니다. 화면 너비가 넓고 320px
포함 된 URL의 html이 크기를 더 크게 설정할 수 있는 iPhone 4의 사파리에서 가장 두드러집니다 .
사용하는 또 다른 이유는 object
iframe이 이상은 즉 object
(AN 때 하위 자원 <object>
수행 HTTP
요청)로 간주됩니다 passive/display
의 관점에서 Mixed content
, 그것은 당신이해야 할 때 보안을 더 의미합니다 Mixed content
.
혼합 된 콘텐츠 란 소유하고 https
있지만 리소스가 출신 인 것을 의미합니다 http
.
참조 : https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
참고 URL : https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements
'programing tip' 카테고리의 다른 글
“while (1);”최적화 (0) | 2020.06.12 |
---|---|
기록 데이터를 저장하는 방법 (0) | 2020.06.12 |
GUI를 단위 테스트하려면 어떻게해야합니까? (0) | 2020.06.12 |
보유 할 수있는 JSON의 양에는 제한이 있습니까? (0) | 2020.06.12 |
기본 생성자와 소멸자에서 "= default"는 "{}"과 어떻게 다릅니 까? (0) | 2020.06.12 |