IFrame에서 테두리 제거

707

웹앱에 내장 된 iframe에서 테두리를 어떻게 제거합니까? iframe의 예는 다음과 같습니다.

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

배경색이 일관성이 있다고 가정하면 내 페이지의 내용에서 iframe의 내용으로 원활하게 전환하고 싶습니다. 대상 브라우저는 IE6 전용이며 불행히도 다른 사람을위한 솔루션은 도움이되지 않습니다.

html  css  iframe  internet-explorer-6  noborder 
— JoelB
소스
— Shan Eapen Koshy
2
<style> 태그 안에 ".nb {border : none;}"과 같은 클래스를 만드십시오. 그런 다음 <iframe> 태그 안에 "class ="nb ""를 추가하십시오.
— Jim

답변:

1126

frameBorder속성을 추가하십시오 ( 대문자 'B' 참고 ).

따라서 다음과 같습니다.

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
— 데이비드 바 사랍
소스
3
JavaScript로 알아 내려면 잠시 시간이 걸렸으므로 element.frameBorder = 0이 필요합니다. .style 없음 및 '0'이 아닌 0 사용
— anderspitman
15
마크 업 검증 서비스를 사용하여 문서를 검증 할 때 frameBorderHTML5와 호환되지 않으므로 오류가 발생 합니다. iframe 요소의 frameborder 속성이 더 이상 사용되지 않습니다. 대신 CSS를 사용하십시오. HTML5에서는 CSS 속성을로 설정했습니다 border:0. 유효성 검사 오류를 발생시키지 않고 이전 버전과 호환되는 방법이 있습니까?
— ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
1
@ MatthewT.Baker 물론,이 속성에 대한 다른 많은 질문 중 하나에 대한 내 대답을 참조하십시오 : stackoverflow.com/a/20719286/1016716 죄송합니다. 거기에 대문자 B를 잊어 버렸습니다. 편집하겠습니다.
— Mr Lister
15
@MartinAndersson caniuse.com/#feat=iframe-seamless 는 전혀 지원되지 않는다고 말합니다.
— Tim Büthe 2016 년
2
여기에 대한 답변은 정확하지만 심리스 속성의 사용을 제안하는 의견은 더 이상 정확하지 않습니다. 심리스 속성은 사양에서 제거되었습니다 : w3.org/TR/2014/REC-html5-20141028/…
— Ron E
145

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

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

<iframe frameBorder="0"></iframe>
— 아담
소스
13
이것은 완전히 말도 안됩니다! 그래도 잘 잡는다. 그래서 다시 많은 시간의 문제를 저를 구했습니다 :)
— Alex
그것이 정답이라면 그것은 생명의 은인이 될 것이다. 왜냐하면 그것은 자본 B를 언급하기 때문이다 .
— KARASZI István
1
참고 : F12 "디버거"의 프레임 경계 속성 변경 사항은 IE6에 표시되지 않습니다. 대신 HTML 코드에 속성을 추가하십시오.
JavaScript 속성 frameBorder에는 대문자 B가 있지만 HTML 속성은 항상 대소 문자를 구분하지 않습니다. 그리고 XHTML에서는 모두 소문자 여야 frameborder합니다.
— Mr Lister
83

에 따라 iframe이 문서 FRAMEBORDER은 더 이상 사용되지 않으며은 "경계"CSS 속성을 사용하는 것이 선호된다 :

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

frameBorder 속성을 추가하는 것 외에도 스크롤 막대가 나타나지 않도록 스크롤 속성을 "no"로 설정하는 것이 좋습니다. 

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
— 이종
소스
1
HTML5에서 동등한 것은 무엇입니까?
— Daniel Springer 2016
3
style = "overflow : hidden"
21

브라우저 별 문제의 경우 frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"Dreamweaver에 따라 추가하십시오 .

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>
— Marnix Bras
소스
9

HTML iframe 프레임 테두리 속성 사용

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

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

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

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

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

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

— 수박 바달
소스
9

style="border:0;"iframe 코드에서 사용할 수 있습니다 . HTML5에서 테두리를 제거하는 것이 좋습니다.

코드를 편집하지 않고 iframe을 맞춤 설정하려면 html5 iframe 생성기 도구를 확인하십시오 .

— 샨 이펜 코시
소스
9

스타일 속성을 사용할 수 있습니다. 프레임의 보더를 제거하려는 경우 HTML5의 경우 또는 스타일 속성을 사용할 수 있습니다. 아래 주어진

코드는 여기에 간다

<iframe src="demo.htm" style="border:none;"></iframe>
— 아르 판 사이 니
소스
7

frameBorder 속성 (자본 'B')을 추가하십시오.

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
— 라울 강화
소스
6

이런 식으로 JavaScript를 사용하여 수행 할 수도 있습니다. IE 및 기타 브라우저에서 iframe 요소를 찾아 테두리를 제거합니다 (JavaScript를 사용하는 대신 비 IE 브라우저에서 "border : none;"스타일을 설정할 수 있음). 그리고 iframe이 생성되고 문서에 배치 된 후에도 작동합니다 (예 : JavaScript가 아닌 일반 HTML로 추가 된 iframe)!

이것은 iframe이 BOM에 생성 된 후 IE가 iframe 요소가 아니라 iframe 요소에 테두리를 생성하기 때문에 작동하는 것으로 보입니다. ($ @ & * # @ !!! IE !!!)

참고 : 부모 부분과 iframe이 동일한 도메인, 포트, 프로토콜 등의 SAME 출처 인 경우 IE 부분은 물론 작동합니다. 그렇지 않으면 스크립트는 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.
         }
   }
— 개정판 J118
소스
6

나는 위의 모든 것을 시도했지만 그것이 작동하지 않으면 아래 CSS를 시도하여 문제를 해결하십시오. 브라우저에 패딩이나 여백을 추가하지 않도록 지시합니다.

* {
  padding:0px;
  margin:0px;
 }
— th0ward
소스
5

스타일 시트에 추가

{
  padding:0px;
  margin:0px;
  border: 0px

}

이것은 또한 실행 가능한 옵션입니다.

— Tropilac
소스
frameBorder는 나를 위해 작동하지 않았지만 이것은 효과가있었습니다. 감사.
— Dois
4

iFrame을 사용하여 300x300 크기를 기반으로하지 않는다고 가정하고 전체 화면의 너비와 높이에 맞추려면 다음과 같이 본문 여백을 "0"으로 설정해야합니다.

<body style="margin:0px;">
— 마이클 허어
소스
4 
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

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

— IamGuest
소스
4

frameBorder 속성을 추가하거나 border-width 0px;와 함께 style을 사용하거나 border style을 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>
스 니펫 확장

— 개정
소스
3

이것을 사용하십시오

style="border:none;

예:

<iframe src="your.html" style="border:none;"></iframe>
— 사용자
소스
2

테두리를 제거하기 위해 CSS border 속성을 none으로 사용할 수 있습니다.

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
— 사용자
소스
1

간단한 iframe 태그에 속성을 추가하면 frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

— 체탄 차우 한
소스
질문에 대답하기 전에 항상 기존 답변을 읽으십시오. 이 답변은 이미 제공되었습니다. 답변을 반복하지 말고 기존 답변에 투표하십시오. 좋은 답변을 작성하기위한 몇 가지 지침은 여기 에서 찾을 수 있습니다 .
— dferenc
0

1. 인라인 스타일 설정 테두리 : 0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2. 태그 속성을 통한 프레임 테두리 설정 0

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

3. I 프레임이 여러 개인 경우 클래스를 제공하고 CSS를 내부 또는 외부에 넣을 수 있습니다.

HTML : 

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS :

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>
— 사미르 라 카니
소스
0

아래쪽 흰색 테두리에 문제가 있었고 테두리, 여백 및 패딩 규칙으로 수정할 수 없었습니다. 따라서 display:block;iframe은 인라인 요소 이므로 추가하십시오 .

이것은 HTML의 공백을 고려합니다.

— 남성
소스
-1 
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Firefox와 함께 작동;)

— dissaster 마스터
소스
아마도 다른 질문?
-1 
<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.
— Md Shahriar
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.