Usuń ramkę z ramki IFrame

706

Jak usunąć ramkę z elementu iframe osadzonego w mojej aplikacji internetowej? Przykładem iframe jest:

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

Chciałbym, aby przejście z treści na mojej stronie do zawartości ramki iframe było płynne, przy założeniu, że kolory tła są spójne. Docelowa przeglądarka to tylko IE6 i niestety rozwiązania dla innych nie pomogą.

JoelB
źródło
Możesz to łatwo zrobić za pomocą generatora iframe
Shan Eapen Koshy
2
Wystarczy utworzyć klasę, taką jak „.nb {border: none;}” wewnątrz znacznika <style>. Następnie dodaj „class =" nb "" wewnątrz znacznika <iframe>.
Jim

Odpowiedzi:

1125

Dodaj frameBorderatrybut (zwróć uwagę na wielką literę „B” ).

Więc wyglądałoby to tak:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>
David Basarab
źródło
3
Zajęło mi chwilę, aby dowiedzieć się, w JavaScript potrzebujesz element.frameBorder = 0. nie. styl i użyj 0, a nie „0”
anderspitman
15
Podczas sprawdzania poprawności dokumentu za pomocą usługi sprawdzania poprawności znaczników pojawia frameBorder się błąd, ponieważ nie jest on zgodny z HTML5: Atrybut frameborder elementu iframe jest nieaktualny. Zamiast tego użyj CSS. W HTML5 ustawiłbym właściwość CSS na border:0. Czy istnieje sposób, aby uczynić go wstecznie kompatybilnym bez powodowania błędów sprawdzania poprawności?
26 ʙᴀᴋᴇʀ
1
@ MatthewT.Baker Pewnie, zobacz moją odpowiedź na jedno z wielu innych pytań na temat tego atrybutu: stackoverflow.com/a/20719286/1016716 Ups, widzę, że tam zapomniałem dużej litery B; Będę edytować.
Pan Lister,
15
@MartinAndersson caniuse.com/#feat=iframe-seamless stwierdza, że ​​nie jest w ogóle obsługiwany.
Tim Büthe,
2
Odpowiedź tutaj jest poprawna, jednak komentarze sugerujące użycie atrybutu bezszwowego nie są już poprawne. Bezproblemowy atrybut został usunięty ze specyfikacji: w3.org/TR/2014/REC-html5-20141028/...
Ron E
144

Po tym, jak oszalałem, próbując usunąć granicę w IE7, odkryłem, że w atrybucie frameBorder rozróżniana jest wielkość liter.

Trzeba ustawić atrybut frameborder z kapitału B .

<iframe frameBorder="0"></iframe>
Adam
źródło
13
To jest całkowicie niedorzeczne! Ale dobry chwyt. WIĘC zaoszczędziłem wiele godzin kłopotów :)
Alex
byłoby ratownik jeśli były prawidłowe odpowiedzi, ponieważ wymienia kapitałową B .
KARASZI István
1
UWAGA: zmiany atrybutów ramki w „debuggerze” F12 nie będą pokazywane przez IE6. Zamiast tego dodaj atrybut w kodzie HTML.
Należy pamiętać, że chociaż właściwość JavaScript ma frameBorderwielką literę B, w atrybucie HTML faktycznie zawsze nie jest rozróżniana wielkość liter. A w XHTML powinno być pisane małymi literami frameborder.
Pan Lister,
83

Zgodnie z dokumentacją iframe frameBorder jest przestarzały i preferowane jest użycie atrybutu CSS „border”:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Uwaga: Właściwość granicy CSS nie osiąga pożądanych wyników w IE6, 7 lub 8.
Roberto Chiaretti
źródło
54

Oprócz dodania atrybutu frameBorder warto rozważyć ustawienie atrybutu przewijania na „nie”, aby zapobiec wyświetlaniu pasków przewijania.

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 
ksenoks
źródło
1
Jaki jest jej odpowiednik w HTML5?
Daniel Springer,
3
style = „przepełnienie: ukryte”
21

W przypadku problemów specyficznych dla przeglądarki dodaj także frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"zgodnie z programem 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
źródło
9

Użyj atrybutu ramki iframe HTML

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

Uwaga: użyj ramki B (czapka B) dla IE, w przeciwnym razie nie będzie działać. Ale atrybut iframe frameborder nie jest obsługiwany w HTML5. Zamiast tego użyj CSS.

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

możesz również usunąć przewijanie za pomocą atrybutu przewijania http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Możesz także użyć atrybutu bezszwowego, który jest nowy w HTML5. Bezproblemowy atrybut tagu iframe jest obsługiwany tylko w Opera, Chrome i Safari. Gdy jest obecny, określa, że ​​iframe powinien wyglądać tak, jakby był częścią dokumentu zawierającego (bez ramek i pasków przewijania). Na razie płynny atrybut tagu jest obsługiwany tylko w Opera, Chrome i Safari. Ale w niedalekiej przyszłości będzie to standardowe rozwiązanie i będzie kompatybilne ze wszystkimi przeglądarkami. http://www.w3schools.com/tags/att_iframe_seamless.asp

Shubham Badal
źródło
9

Możesz użyć style="border:0;"w swoim kodzie iframe. Jest to zalecany sposób usunięcia obramowania w HTML5.

Sprawdź moje narzędzie generatora iframe HTML5 , aby dostosować iframe bez edytowania kodu.

Shan Eapen Koshy
źródło
9

Właściwość stylu może być używana w HTML5, jeśli chcesz usunąć bodera ramki lub cokolwiek, czego możesz użyć właściwości stylu. jak podano poniżej

Kod idzie tutaj

<iframe src="demo.htm" style="border:none;"></iframe>
Arpan Saini
źródło
7

Dodaj atrybut frameBorder (Wielka litera „B”).

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>
Harden Rahul
źródło
6

W ten sposób możesz to zrobić również za pomocą JavaScript. Znajduje wszelkie elementy iframe i usuwa ich ramki w IE i innych przeglądarkach (chociaż możesz po prostu ustawić styl „border: none;” w przeglądarkach innych niż IE zamiast używać JavaScript). I będzie działać, nawet jeśli zostanie użyty PO wygenerowaniu elementu iframe i umieszczeniu go w dokumencie (np. Elementy iframe dodane w zwykłym HTML, a nie JavaScript)!

Wydaje się, że działa, ponieważ IE tworzy ramkę, nie na elemencie iframe, jak można się spodziewać, ale na TREŚCI iframe - po utworzeniu iframe w BOM. ($ @ I * # @ !!! IE !!!)

Uwaga: Część IE będzie działać (oczywiście) tylko wtedy, gdy okno nadrzędne i element iframe pochodzą z SAMEGO pochodzenia (ta sama domena, port, protokół itp.). W przeciwnym razie skrypt otrzyma błędy „odmowa dostępu” w konsoli błędów IE. Jeśli tak się stanie, jedyną opcją jest ustawienie go przed wygenerowaniem, jak zauważyli inni, lub użycie niestandardowego atrybutu frameBorder = „0”. (lub po prostu niech IE wygląda nieprzyzwoicie - moja obecna ulubiona opcja;))

Zajęło mi WIELE godzin pracy do rozpaczy, żeby to rozgryźć ...

Cieszyć się. :)

// =========================================================================
// 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.
         }
   }
rev. J118
źródło
6

Wypróbowałem wszystkie powyższe i jeśli to nie zadziała, spróbuj poniżej CSS rozwiązał problem. Co po prostu nakazuje przeglądarkom, aby nie dodawały marginesów ani marginesów.

* {
  padding:0px;
  margin:0px;
 }
th0ward
źródło
5

Jeśli typem strony, na której umieszczasz element iframe, jest HTML5, możesz użyć seamlessatrybutu w następujący sposób:

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

Dokumenty Mozilli dotyczące atrybutu bezszwowego

David Tuite
źródło
4
szwy to świetny pomysł, ale niestety nie jest dobrze wspierany. caniuse.com/#search=seamless
code_monk
4
To nie jest w ogóle obsługiwane.
skobaljic 10.04.15
5

W swoim arkuszu stylów dodaj

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

}

Jest to również opłacalna opcja.

Tropilac
źródło
frameBorder nie działał dla mnie, ale tak się stało. Dzięki.
Dois
4

Jeśli używasz ramki iFrame, aby dopasować szerokość i wysokość całego ekranu, co, jak zakładam, nie jest oparte na rozmiarze 300 x 300, musisz również ustawić marginesy ciała na „0” w następujący sposób:

<body style="margin:0px;">
Michael Herr
źródło
4
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Ten kod powinien działać zarówno w HTML 4, jak i 5.

IamGuest
źródło
4

Dodaj atrybut frameBorder lub użyj stylu z szerokością ramki 0px; lub ustaw styl ramki równy brak.

użyj dowolnego z poniżej 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>

Divya Chugh
źródło
3

ustaw także także border = "0px"

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>
Ajesh Kolakkadan
źródło
3

Próbować

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

Spowoduje to usunięcie obramowania ramki.

Amaan Iqbal
źródło
3

Użyj tego

style="border:none;

Przykład:

<iframe src="your.html" style="border:none;"></iframe>
użytkownik6375752
źródło
2

Aby usunąć granicę, możesz użyć właściwości granicy CSS do none.

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>
użytkownik8349297
źródło
1

Po prostu dodaj atrybut w iframe tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

Chetan Chauhan
źródło
Przed odpowiedzią na pytanie zawsze czytaj istniejące odpowiedzi. Ta odpowiedź została już udzielona. Zamiast powtarzać odpowiedź, zagłosuj na istniejącą odpowiedź. Niektóre wskazówki dotyczące pisania dobrych odpowiedzi można znaleźć tutaj .
dferenc
0

1. Obramowanie zestawu Styl wbudowany: 0

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

2. Za pomocą atrybutu tag frameBorder Ustaw 0

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

3. jeśli mamy wiele I Frame Możemy dać klasę i wstawić css wewnętrznie lub zewnętrznie.

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>
Samir Lakhani
źródło
0

Miałem problem z dolną białą ramką i nie mogłem go naprawić za pomocą reguł ramki, marginesu i wypełnienia ... Więc dodaj display:block; ponieważ iframe jest elementem wbudowanym.

Uwzględnia to spacje w kodzie HTML.

MENU
źródło
-1
iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

Działa z Firefox;)

mistrz katastrofy
źródło
może inne pytanie?
-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
źródło