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. ($@&*#@!!! 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>

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

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

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

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

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

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

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

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>

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

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