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 속성이 대소 문자를 구분한다는 것을 알았습니다.

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

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

---

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

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

• 참고 CSS 테두리 속성은 IE6, 7 또는 8에서 원하는 결과를 얻지 못합니다 .

---

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

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

---

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를 사용하여 스크롤을 제거 할 수도 있습니다 .

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

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

---

style="border:0;"iframe 코드에서 사용할 수 있습니다 . HTML5에서 테두리를 제거하는 데 권장되는 방법입니다.

내 html5 iframe 생성기 도구를 확인하여 코드를 편집하지 않고 iframe을 맞춤 설정하세요.

---

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

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

---

스타일 속성은 프레임의 테두리를 제거하거나 스타일 속성을 사용할 수있는 모든 것을 제거하려는 경우 HTML5에 사용할 수 있습니다. 아래와 같이

여기에 코드 입력

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

---

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

IE가 예상대로 iframe 요소가 아니라 iframe의 콘텐츠에 테두리를 생성하기 때문에 작동하는 것으로 보입니다 .iframe이 BOM에서 생성 된 후. ($ @ & * # @ !!! 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.
         }
   }

---

iframe을 배치하는 페이지의 doctype이 HTML5이면 다음 seamless과 같은 속성을 사용할 수 있습니다 .

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

Seamless 속성에 대한 Mozilla 문서

---

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

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

---

In your stylesheet add

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

}

This is also a viable option.

---

If you are using the iFrame to fit the width and height of the entire screen, which I am assuming you are not based on the 300x300 size, you must also set the body margins to "0" like this:

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

---

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

This code should work in both HTML 4 and 5.

---

also set border="0px "

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

---

Either add the frameBorder attribute, or use style with border-width 0px;, or set border style equal to none.

use any one from below 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>

---

Try

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

This will remove the border of your frame.

---

Use this

style="border:none;

Example:

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

---

To remove border you can use CSS border property to none.

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

---

Its simple just add attribute in iframe tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

---

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

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