programing tip

iframe, 포함 및 객체 요소의 차이점

itbloger 2020. 6. 12. 21:41
반응형

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의 사파리에서 가장 두드러집니다 .


사용하는 또 다른 이유는 objectiframe이 이상은 즉 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

반응형