Verwijder rand van IFrame

Hoe verwijder ik de rand van een iframe dat is ingesloten in mijn web-app? Een voorbeeld van het iframe is:

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

Ik wil graag dat de overgang van de inhoud op mijn pagina naar de inhoud van het iframe naadloos is, ervan uitgaande dat de achtergrondkleuren consistent zijn. De doelbrowser is alleen IE6 en helaas zullen oplossingen voor anderen niet helpen.


Antwoord 1, autoriteit 100%

Voeg het kenmerk frameBordertoe (let op de hoofdletter B ).

Het zou er dus als volgt uitzien:

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

Antwoord 2, autoriteit 13%

Nadat ik gek was geworden toen ik probeerde de rand in IE7 te verwijderen, ontdekte ik dat het frameBorder-kenmerk hoofdlettergevoelig is.

Je moet het frameBorder-attribuut instellen met een hoofdletter B.

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

Antwoord 3, autoriteit 8%

Volgens de iframe-documentatie is frameBorder verouderd en het gebruik van het CSS-kenmerk “border” heeft de voorkeur:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Let op de CSS-grenseigenschap levert nietde gewenste resultaten op in IE6, 7 of 8.

Antwoord 4, autoriteit 5%

Naast het toevoegen van het kenmerk frameBorder kunt u overwegen het kenmerk scrollen in te stellen op “nee” om te voorkomen dat er schuifbalken verschijnen.

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

Antwoord 5, autoriteit 2%

Voeg voor browserspecifieke problemen ook frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"toe volgens 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>

Antwoord 6

Gebruik het HTML iframe frameborder-kenmerk

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

Opmerking: gebruik frameBorder (cap B) voor IE, anders werkt het niet. Maar het iframe frameborder-kenmerk wordt niet ondersteund in HTML5. Gebruik dus in plaats daarvan CSS.

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

je kunt het scrollen ook verwijderen met het scroll-attribuut
http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

U kunt ook het naadloze attribuut gebruiken dat nieuw is in HTML5. Het naadloze kenmerk van de iframe-tag wordt alleen ondersteund in Opera, Chrome en Safari. Indien aanwezig, specificeert het dat het iframe eruit moet zien alsof het een onderdeel is van het bevattende document (geen randen of schuifbalken). Vanaf nu wordt het naadloze kenmerk van de tag alleen ondersteund in Opera, Chrome en Safari. Maar in de nabije toekomst zal het de standaardoplossing zijn en compatibel zijn met alle browsers. http://www.w3schools.com/tags/att_iframe_seamless.asp


Antwoord 7

Je kunt style="border:0;"gebruiken in je iframe-code. Dat is de aanbevolen manier om randen in HTML5 te verwijderen.

Bekijk mijn html5 iframe generatortool om je iframe aan te passen zonder code te bewerken.


Antwoord 8

Stijleigenschap kan worden gebruikt
Voor HTML5 als u de boder van uw frame of iets anders wilt verwijderen, kunt u de stijleigenschap gebruiken. zoals hieronder weergegeven

Code komt hier

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

Antwoord 9

Voeg het kenmerk frameBorder toe (hoofdletter B ).

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

Antwoord 10

Ik heb al het bovenstaande geprobeerd en als dat niet werkt, probeer dan de onderstaande CSS, het probleem is voor mij opgelost. Wat de browsers alleen maar vertelt om geen opvulling of marge toe te voegen.

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

Antwoord 11

Je kunt het ook op deze manier met JavaScript doen. Het zal alle iframe-elementen vinden en hun randen verwijderen in IE en andere browsers (hoewel je gewoon een stijl van “border : none;” in niet-IE-browsers kunt instellen in plaats van JavaScript te gebruiken). EN het werkt zelfs als het wordt gebruikt NADAT het iframe is gegenereerd en in het document is geplaatst (bijv. iframes die zijn toegevoegd in gewone HTML en niet in JavaScript)!

Dit lijkt te werken omdat IE de rand maakt, niet op het iframe-element zoals je zou verwachten, maar op de INHOUD van het iframe – nadat het iframe is gemaakt in de stuklijst. ([email protected]&*#@!!! IE!!!)

Opmerking: Het IE-gedeelte werkt (uiteraard) alleen als het bovenliggende venster en iframe van dezelfde oorsprong zijn (zelfde domein, poort, protocol enz.). Anders krijgt het script “toegang geweigerd”-fouten in de IE-foutconsole. Als dat gebeurt, is uw enige optie om het in te stellen voordat het wordt gegenereerd, zoals anderen al hebben opgemerkt, of het niet-standaard kenmerk frameBorder=”0″ te gebruiken. (of laat IE er gewoon fugly uitzien – mijn huidige favoriete optie 😉 )

Het heeft me VEEL uren gekost tot ik er wanhopig van werd om dit uit te zoeken…

Geniet. 🙂

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

Antwoord 12

Als het doctype van de pagina waarop je het iframe plaatst HTML5 is, dan kun je het seamlessattribuut als volgt gebruiken:

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

Mozilla-documenten over het naadloze kenmerk


Antwoord 13

Voeg toe aan je stylesheet

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

Dit is ook een haalbare optie.


Antwoord 14

Voeg het kenmerk frameBorder toe, of gebruik stijl met randbreedte 0px;, of stel de randstijl in op geen.

gebruik een van de onderstaande drie:

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

Antwoord 15

Als je het iFrame gebruikt om de breedte en hoogte van het hele scherm te laten passen, waarvan ik aanneem dat je niet gebaseerd bent op het formaat 300×300, moet je de body-marges ook als volgt op “0” zetten:

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

Antwoord 16

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

Deze code zou in zowel HTML 4 als 5 moeten werken.


Antwoord 17

stel ook border=”0px ”

in

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

Antwoord 18

Probeer

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

Hiermee wordt de rand van uw frame verwijderd.


Antwoord 19

Gebruik dit

style="border:none;

Voorbeeld:

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

Antwoord 20

Om de rand te verwijderen, kunt u de CSS-eigenschap voor rand gebruiken voor geen.

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

Antwoord 21

Het is eenvoudig om een ​​attribuut toe te voegen in de iframe-tag frameborder = 0
<iframe src="" width="200" height="200" frameborder="0"></iframe>


Antwoord 22

1.Via Inline Style set border:0

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

2. Via Tag Attribuut frameBorder Set 0

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

3. als we meerdere I-frames hebben, kunnen we klasse geven en css intern of extern plaatsen.

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>

Antwoord 23

Ik had een probleem met de onderste witte rand en ik kon het niet oplossen met rand, marge & opvulregels … Dus voeg display:block;toe omdat iframe een inline-element is.

Hiermee wordt rekening gehouden met witruimte in uw HTML.


Antwoord 24

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

Werkt met Firefox 😉


Antwoord 25

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes