[Html] IFrame에서 테두리 삭제



Answers

IE7에서 테두리를 제거하려고 시도한 후 frameBorder 특성이 대소 문자를 구분한다는 것을 알았습니다.

frameBorder 특성을 대문자 B 로 설정해야합니다.

<iframe frameBorder="0" ></iframe>
Question

내 웹 앱에 포함 된 iframe 에서 테두리를 제거하려면 어떻게해야합니까? iframe 의 예는 다음과 같습니다.

<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>

백그라운드 색상이 일관성이 있다고 가정 할 때 내 페이지의 콘텐츠에서 iframe 의 콘텐츠로 원활하게 전환하고 싶습니다. 대상 브라우저는 IE6 전용이며 불행히도 다른 사람들을위한 솔루션은 도움이되지 않습니다.




HTML iframe frameborder 속성 사용

http://www.w3schools.com/tags/att_iframe_frameborder.asp

참고 : IE에서는 프레임 B 순서 (캡 B)를 사용하십시오. 그렇지 않으면 작동하지 않습니다. 그러나 iframe frameborder 속성은 HTML5에서 지원되지 않습니다. 그래서 대신 CSS를 사용하십시오.

<iframe src="http://example.org" width="200" height="200" style="border:0">

스크롤 속성 http://www.w3schools.com/tags/att_iframe_scrolling.asp 사용하여 스크롤을 제거 할 수도 있습니다 http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">

또한 HTML5에서 새로운 속성 인 seamless 속성을 사용할 수 있습니다. iframe 태그의 완벽한 속성은 Opera, Chrome 및 Safari에서만 지원됩니다. iframe이 있으면 포함 된 문서의 일부인 것처럼 보이도록 지정합니다 (테두리 또는 스크롤 막대 없음). 현재이 태그의 완벽한 속성은 Opera, Chrome 및 Safari에서만 지원됩니다. 그러나 가까운 장래에 표준 솔루션이 될 것이며 모든 브라우저와 호환 될 것입니다. http://www.w3schools.com/tags/att_iframe_seamless.asp




<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

이 코드는 HTML 4와 5 모두에서 작동해야합니다.




frameBorder 속성을 추가하거나 border-width 0px와 함께 스타일을 사용하거나 border 스타일을 none으로 설정하십시오.

아래에서 하나를 사용하십시오. 3 :

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>




frameBorder 특성 (Capital 'B')을 추가하십시오.

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>



이 방법으로 JavaScript로도 작업 할 수 있습니다. iframe 요소를 찾아내어 IE 및 다른 브라우저에서 테두리를 제거합니다 (JavaScript를 사용하는 대신 IE가 아닌 브라우저에서는 "border : none;"스타일을 설정할 수 있음). iframe이 생성되어 문서의 적절한 위치 (예 : HTML이 아닌 일반 텍스트로 추가 된 iframe)에 사용한 후에도 작동합니다.

이것은 iframe 엘리먼트가 아닌 iframe 엘리먼트가 border를 생성하기 때문에 iframe이 iframe이 BOM에 생성 된 후에 iframe의 CONTENT에 생성되기 때문에 작동하는 것으로 보입니다. ($ @ & * # @ !!! IE !!!)

참고 : IE 부분은 부모 창과 iframe이 같은 출처 (동일한 도메인, 포트, 프로토콜 등)에있는 경우에만 작동합니다 (물론). 그렇지 않으면 스크립트는 IE 오류 콘솔에서 "액세스 거부"오류를 가져옵니다. 그러한 일이 발생하면, 다른 옵션처럼 생성되기 전에 설정하거나 비표준 frameBorder = "0"속성을 사용하는 것이 유일한 옵션입니다. (또는 단지 IE가 못 생겨 보이게한다 - 현재 내가 좋아하는 옵션))

이 점을 이해하기 위해 절망에 이르기까지 수천 시간을 일했습니다.

즐겨. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }



"border"CSS 속성을 사용하는 것도 효과가 있습니다 :

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • 참고 CSS 테두리 속성은 IE6, 7 또는 8에서 원하는 결과를 얻지 못합니다 .



iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Firefox에서 작동;)




또한 border = "0px"로 설정하십시오.

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>



나는 위의 모든 것을 시도해 보았다. 그리고 그것이 당신을 위해 작동하지 않는다면, 아래 CSS가 나에게이 문제를 해결하도록 노력한다. 그냥 브라우저에 패딩이나 여백을 추가하지 말라고 알려줍니다.

* {
  padding:0px;
  margin:0px;
 }



이것을 사용하십시오

style="border:none;

예:

<iframe src="your.html" style="border:none;"></iframe>



Links