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

180

HTML5는 여러 가지 임베디드 컨텐츠 요소를 정의하는데, 이는 조감도에서 거의 동일하다는 점과 매우 유사 해 보입니다.

무엇 사이의 실제 차이 iframe, embed그리고 object?

타사 사이트에서 HTML 파일을 포함하려는 경우 이러한 요소 중 어떤 요소를 사용할 수 있으며 어떻게 다른가요?

html iframe

— Cnst
소스

그들은 실제로 동일하게 보이지 않습니다. 타사 사이트는 iframe입니다.

— Kai Qing

포함 대 개체 하위 집합 : stackoverflow.com/questions/1244788/embed-vs-object , iframe 대 개체 하위 집합 : stackoverflow.com/questions/924946/… , 개체 대 비디오 포함 : stackoverflow.com/questions/11199048/…

— Ciro Santilli 郝海东冠状病六四事件法轮功

@KaiQing 그들이 동일하게 보이는지 아닌지는 OP에 의해 공유되지 않는 당신의 의견입니다. 아, 그리고 그것은 또한 그의 질문에 대한 답변이 아닙니다.

— Malik A. Rumi 1

@Malik-그것이 주석 인 이유입니다. 그리고, 각각의 정의가 차이점과 사용 시점을 명확하게 설명하기 때문에 동일하게 보이는 것은 제 의견이 아닙니다. 프론트 엔드에 나타나는 방식은 이론적으로 동일하게 보일 수 있지만 OP의 컨텍스트는 사용법이 아닌 외관에 있다고 생각합니다. 의견은 귀하가 요청한대로 타사에 iframe을 사용한다는 것을 설명하기위한 것입니다. 나는 그때 전체 답을 쓸 수 없을 정도로 바쁘다고 생각할 수 있습니다.

— Kai Qing

MDN에 대한 자세한 설명은 developer.mozilla.org/en-US/docs/Learn/HTML/…

— ohkts11

답변:

122

`<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>설정할 수 없습니다 .

— 조나스 슈베르트 에를 란드 손
소스

embed방문자가 프레임을 차단하는 웹 사이트에서 발생하는 리디렉션 체인을 따르도록하는 것이 이상적입니다. (우리는이를 사용하여 연합 로그인을 시작합니다.)

— Riking

"객체가 스크립트를 허용하지 않습니다"에 대해서는 사실이 아닙니다. schepers.cc/svg/blendups/embedding.html

— Dzenly

@Dzenly 예를 들어 선언 된 스크립트와 via <object>를 포함하는 SVG 가 실행되지만 부모 페이지에서 객체의 컨텍스트에 도달하는 것은 불가능합니다 (또는 관리하지 않았습니다). 따라서 개체의 관점에서 "내부"스크립트가 실행되고 "외부"스크립트는 개체 컨텍스트와 통신 할 수 없습니다.

— Jonas Schubert Erlandsson '11

— Bachsau

@Bachsau는 다른 옵션과 그 장단점에 대한 토론이기 때문에 빈틈없이 말하는 <iframe />길이 라고 생각합니다. 게시물의 요점은 모두 다르다는 것입니다. w3.org/TR/html5/embedded-content-0.html#the-embed-element<embed> 사양에 여전히 남아 있으므로 언급하는 것이 정당합니다. 나는 또한 당신 이 구식 이라고 주장 하고 다음 문장에서 Java 애플릿을 언급 한다는 것이 조금 재미 있다는 것을 알게 되었습니다 :)<embed>

— Jonas Schubert Erlandsson

사용하는 이유 중 하나 object이상은 iframe객체 객체의 크기에 맞게 포함 된 내용을 재-크기 때문이다. 화면 너비가 넓고 320px포함 된 URL의 html이 크기를 더 크게 설정할 수 있는 iPhone 4의 사파리에서 가장 두드러집니다 .

— Ivanixdev
소스

더 자세한 내용이나 참고 자료를 알려 주시겠습니까? 그렇지 않으면 답변이 아닌 설명으로 만 규정됩니다.

— cnst

그러나 유용한 정보입니다

— Malik A. Rumi

이것은 나의 유스 케이스였습니다.

— Sid

iFrame + iPhone = iHeadache

— djvg

사용하는 또 다른 이유는 objectiframe이 이상은 즉 object(AN 때 하위 자원 <object>수행 HTTP요청)로 간주됩니다 passive/display의 관점에서 Mixed content, 그것은 당신이해야 할 때 보안을 더 의미합니다 Mixed content.

혼합 된 콘텐츠 란 소유하고 https있지만 리소스가 출신 인 것을 의미합니다 http.

참조 : https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

— 하루 누르 한
소스

활성 및 수동 표제 아래에 오브젝트를 나열하는 링크 된 기사의 현재 판독을 기반으로하는 경우가 아닌 것 같습니다. 패시브 : "하위 자원 (<object>가 HTTP 요청을 수행 할 때)"/ 활성 : "<object> (데이터 속성)"(후자는 원래 질문에 따라 다른 HTTP 요청을로드하는 방법입니다.

— Tim Abell