IFrame에서 테두리 제거

IFrame에서 테두리 제거

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

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

배경색이 일정하다고 가정하고 제 페이지의 내용에서 iframe의 내용으로 원활하게 전환되었으면 합니다.대상 브라우저는 IE6 전용이며 안타깝게도 다른 사용자를 위한 솔루션은 도움이 되지 않습니다.

추가합니다.frameBorder속성(대문자 'B' 참고).

다음과 같이 표시됩니다.

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

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

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

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

프레임 문서에서 frameBorder는 더 이상 사용되지 않으며 "경계" CSS 속성을 사용하는 것이 좋습니다.

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>

• CSS 경계 속성은 IE6, 7 또는 8에서 원하는 결과를 얻지 못합니다.

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

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

에는 " " " 를 합니다.frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"드림위버에 따르면:

<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>

사용할 수 있습니다.style="border:0;"당신의 iframe 코드에서.합니다.

코드를 편집하지 않고 iframe을 사용자 정의하려면 내 html5 iframe 생성기 도구를 확인하십시오.

HTML iframe 프레임 경계 속성 사용

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

참고: IE에 frameBorder(캡 B)를 사용하면 작동하지 않습니다.그러나 iframe frame border 속성은 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

Style 속성을 사용할 수 있습니다. 만약 당신이 당신의 프레임의 보디를 제거하거나 당신이 아래에 주어진 것처럼 당신이 사용할 수 있는 어떤 것이라도 제거하고 싶다면 HTML5에 사용할 수 있습니다.

코드는 여기

<iframe src="demo.htm" style="border:none;"></iframe>

저는 위의 모든 것을 시도했고 만약 그것이 당신에게 효과가 없다면 아래의 CSS로 문제를 해결해 주세요.이것은 브라우저들에게 패딩이나 마진을 추가하지 말라는 것입니다.

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

이런 식으로 자바스크립트로도 할 수 있습니다.iframe 요소를 찾고 IE와 다른 브라우저에서 경계를 제거합니다(비 IE 브라우저에서는 JavaScript를 사용하는 대신 "경계: 없음;" 스타일을 설정할 수 있지만).그리고 iframe이 생성된 후 문서에서 제자리에 있는 경우에도 작동합니다(예: 자바스크립트가 아닌 일반 HTML로 추가된 경우)!

iframe 요소가 아니라 iframe의 내용에서 iframe이 BOM에 생성된 후에 IE가 경계를 만들기 때문에 작동하는 것으로 보입니다. ($@&*#@!!)IE!!!)

참고: IE 파트는 상위 창과 iframe이 동일한 오리진(같은 도메인, 포트, 프로토콜 등)인 경우에만 작동합니다.그렇지 않으면 IE 오류 콘솔에서 스크립트가 "액세스 거부" 오류를 발생시킵니다.이 경우 다른 사용자가 언급한 것처럼 생성 전에 설정하거나 비표준 frameBorder="0" 특성을 사용하는 것이 유일한 옵션입니다.(아니면 그냥 내가 지금 가장 좋아하는 옵션인 것처럼 보이게 내버려 둬 ;)

이걸 알아내는데 절망할 정도로 많은 시간이 걸렸습니다

맛있게 드세요 :)

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

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.
}

frameBorder 특성(자본 'B')을 추가합니다.

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

스타일시트에 추가

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

}

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

frameBorder 특성을 추가하거나, 테두리 너비가 0px인 스타일을 사용하거나, 테두리 스타일을 없음으로 설정합니다.

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>

iframe을 할 수 .seamless다음과 같은 속성:

<iframe src="..." seamless="seamless"></iframe>

완벽한 특성에 대한 Mozilla 문서

iFrame을 사용하여 전체 화면의 너비와 높이를 맞추는 경우(300x300 크기를 기준으로 하지 않는 것으로 가정함), 본문 여백도 다음과 같이 "0"으로 설정해야 합니다.

<body style="margin:0px;">

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

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

border="0"도 설정합니다.

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

해라

<iframe src="url" style="border:none;"></iframe>

프레임의 테두리가 제거됩니다.

사용

style="border:none;

예:

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

테두리를 제거하려면 CSS 테두리 속성을 none에 사용할 수 있습니다.

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

1.인라인 스타일 세트 경계를 통해:0

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

Via 태그 특성 프레임 경계 집합 0

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

I Frame이 여러 개 있으면 클래스를 주고 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>

iframe 태그 프레임 경계에 속성만 추가하면 됩니다 = 0<iframe src="" width="200" height="200" frameborder="0"></iframe>

나에게, 추가는 완벽하게 효과가 있었습니다.

.iframe{
box-shadow: none !important;
}

이 솔루션은 특히 제가 편집하고 있는 쇼핑 테마를 위한 것입니다.Shopify 테마는 전체 테마에 걸쳐 iframe을 다른 방식으로 사용하고 그 중 하나는 광택을 냅니다.저는 수동으로 CSS에 들어가서 CSS 속성을 무시해야 했습니다.

하단 흰색 테두리에 문제가 있어서 테두리, 여백 및 패딩 규칙으로 해결할 수 없었습니다.그래서 추가display:block;iframe은 인라인 요소이기 때문입니다.

이렇게 하면 HTML의 공백이 고려됩니다.

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

Firefox와 함께 작동합니다 ;)

<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.

언급URL : https://stackoverflow.com/questions/65034/remove-border-from-iframe