HTML5 iFrame Seamless 속성

HTML5 iFrame Seamless 속성

---

HTML5에서 iframe에는 테두리와 스크롤바를 제거해야하는 'seamless'와 같은 새로운 속성이 있습니다. 시도했지만 작동하지 않는 것 같습니다. 여전히 스크롤바와 테두리를 볼 수 있습니다 (Google 크롬을 브라우저로 사용하고 있음). 다음은 내 코드입니다.

<iframe seamless="seamless" title="google" width="600" height="300" src="http://www.google.co.uk"></iframe>

왜 작동하지 않는지 아십니까?

한 가지 더 질문이 있습니다. iframe 내 페이지의 특정 섹션을 타겟팅 할 수 있습니까?

---

아직 올바르게 지원되지 않습니다.

Chrome 31 (및 이전 버전)은 속성의 일부를 지원하지만 완전히 지원되지는 않습니다.

---

업데이트 : 2016 년 10 월

seamless속성은 더 이상 존재하지 않습니다. 원래 첫 번째 HTML5 사양에 포함되도록 제안되었지만 나중에 삭제되었습니다. 같은 이름의 관련없는 속성이 HTML5.1 초안에서 짧은 카메오를 만들었지 만 2016 년 중반에 버려졌습니다.

그래서 저는 구현 자 측과 웹 개발 측 모두의 요점은 사양 seamless대로가 누구도 시작하고 싶어하지 않는 것 같다는 것입니다. 아니면 적어도 누군가가 실제로 원했던 것보다 많습니다. 그리고 어쨌든 @annevk가 말했듯이, Shadow DOM에 비추어 "사건에 의해 극복"된 것 같습니다.

즉 seamless, 기억 에서 속성을 제거하고 존재하지 않는 척하십시오.

후손을 위해 다음은 5 년 전의 제 원래 답변입니다.

원래 답변 : 2011 년 4 월

현재 속성은 초안 모드입니다. 이러한 이유로 현재 브라우저는 아직이를 지원하지 않습니다 (구현이 변경 될 수 있으므로). 그동안 CSS를 사용하여 iframe에서 테두리 / 스크롤바를 제거하는 것이 가장 좋습니다.

iframe[seamless]{
    background-color: transparent;
    border: 0px none transparent;
    padding: 0px;
    overflow: hidden;
}

CSS로 추가 할 수있는 것보다 seamless 속성에 더 많은 것이 있습니다. 속성 뒤에있는 이유의 일부는 중첩 된 콘텐츠가 iframe에 적용된 동일한 스타일을 상속하도록 허용하는 것이 었습니다 (포함 된 문서가 요소 내부에 하나의 큰 중첩 된 것처럼 작동하는 것처럼 작동합니다. 예).

마지막으로 Internet Explorer 버전 (8 이하)에는 테두리, 스크롤바 및 배경색을 제거하기 위해 추가 속성이 필요합니다.

<iframe frameborder="0" allowtransparency="true" scrolling="no" src="..."></iframe>

당연히 이것은 유효하지 않습니다. 그래서 그것을 처리하는 방법은 당신에게 달려 있습니다. 내 (선택적) 접근 방식은 에이전트 문자열을 스니핑하고 9 이전의 IE 버전에 대한 특성을 추가하는 것입니다.

도움이되기를 바랍니다. :)

---

오늘 발표 된 최신 W3C HTML5 권장 사항 (최종 HTML5 표준이 될 가능성이 있음) 에 따르면 iframe 요소에는 더 이상 seamless 속성이 없습니다. 표준화 과정 어딘가에서 제거 된 것 같습니다.

caniuse.com 에 따르면 어떤 주요 브라우저도이 속성을 지원하지 않으므로 (더 이상) 사용해서는 안됩니다.

---

지금 바로 semless 속성을 사용할 수 있습니다. 여기에서 독일 문서 http://www.solife.cc/blog/html5-iframe-attribut-seamless-beispiele.html을 찾았습니다 .

이 주제에 대한 또 다른 프레젠테이션이 있습니다 : http://benvinegar.github.com/seamless-talk/

부모와 iframe간에 통신하려면 window.postMessage 메서드를 사용해야합니다.

---

누군가에게 유용 할 것이라고 생각했습니다.

크롬 버전 32에서는 seamless 속성없이 iframe 주위에 2 픽셀 테두리가 자동으로 나타납니다. 다음 CSS 규칙을 추가하여 쉽게 제거 할 수 있습니다.

iframe:not([seamless]) { border:none; }

Chrome은 다음과 같은 기본 사용자 에이전트 스타일과 동일한 선택기를 사용합니다.

iframe:not([seamless]) {
  border: 2px inset;
  border-image-source: initial;
  border-image-slice: initial;
  border-image-width: initial;
  border-image-outset: initial;
  border-image-repeat: initial;
}

---

iO8은 iframe seamless 속성에 대한 지원을 제거했습니다 .

• Safari, HomeScreen, 새로운 WKWebView 및 UIWebView에서 테스트되었습니다.

기타 iOS 8 변경 사항에 대한 자세한 내용 및 성능 검토 :

• Cordova 메일 링리스트의 iOS8 변경
• Sencha.com 블로그 : Apple, iOS 8에서 HTML5에 대한 사랑을 보여줍니다

---

당신은 쓰기 만하면됩니다

원활한

귀하의 코드에서. 다음은 필요하지 않습니다.

seamless ="seamless"

I just found this out myself.

EDIT - this does not remove scrollbars. Strangely

scrolling="no" still seems to work in html5. I have tried using the overflow function with an inline style as recommended by html5 but this doesn't work for me.

---

Use the frameborder attribute on your iframe and set it to frameborder="0" . That produces the seamless look. Now you maybe saying I want the nested iframe to control rather I have scroll bars. Then you need to whip up a JavaScript script file that calculates height minus any headers and set the height. Debounce is javascript plugin needed to make sure resize works appropriately in older browsers and sometimes chrome. That will get you in the right direction.

---

Still at 2014 seamless iframe is not fully supported by all of the major browsers, so you should look for an alternative solution.

By January 2014 seamless iframe is still not supported for Firefox neither IE 11, and it's supported by Chrome, Safari and Opera (the webkit version)

If you wanna check this and more supported options in detail, the HTML5 test site would be a good option:

http://html5test.com/results/desktop.html

You can check different platforms, at the score section you can click every browser and see what's supported and what's not.

---

I couldn't find anything that met my requirements, hece I came up with this script (depends on jQuery):

https://gist.github.com/invernizzie/95182de86ea9dc5daa80

It will resize the iframe to the viewport size (taking into account wider content). It could use an improvement to use the viewport height instead of the content height, in the case that the former is bigger.

참고URL : https://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute