Rimuovi bordo da IFrame

Come rimuoverei il bordo da un iframe incorporato nella mia app Web? Un esempio di iframe è:

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

Vorrei che la transizione dal contenuto della mia pagina a quello dell'iframe fosse senza soluzione di continuità, supponendo che i colori di sfondo fossero coerenti. Il browser di destinazione è solo IE6 e purtroppo le soluzioni per gli altri non saranno di aiuto.

Aggiungi l' frameBorderattributo (nota la "B" maiuscola ).

Quindi sembrerebbe:

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

Dopo essere impazzito nel tentativo di rimuovere il bordo in IE7, ho scoperto che l'attributo frameBorder fa distinzione tra maiuscole e minuscole.

Devi impostare l'attributo frameBorder con la B maiuscola .

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

Come da documentazione iframe , frameBorder è obsoleto e si preferisce utilizzare l'attributo CSS "border":

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

• Nota proprietà border CSS non non ottenere i risultati desiderati in IE6, 7 o 8.

Oltre ad aggiungere l'attributo frameBorder, potresti considerare di impostare l'attributo scroll su "no" per impedire la visualizzazione delle barre di scorrimento.

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

Per problemi specifici del browser, aggiungere anche in frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"base a 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>

Usa l'attributo frameborder iframe HTML

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

Nota: utilizzare l' ordine del telaio B (cappuccio B) per IE, altrimenti non funzionerà. Tuttavia, l'attributo frameborder iframe non è supportato in HTML5. Quindi, utilizzare CSS invece.

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

puoi anche rimuovere lo scorrimento usando l'attributo di scorrimento http://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Inoltre puoi usare l'attributo seamless che è nuovo in HTML5. L'attributo senza soluzione di continuità del tag iframe è supportato solo in Opera, Chrome e Safari. Quando presente, specifica che l'iframe dovrebbe apparire come parte del documento contenente (senza bordi o barre di scorrimento). A partire da ora, l'attributo senza soluzione di continuità del tag è supportato solo in Opera, Chrome e Safari. Ma nel prossimo futuro sarà la soluzione standard e sarà compatibile con tutti i browser. http://www.w3schools.com/tags/att_iframe_seamless.asp

Puoi usare il style="border:0;"tuo codice iframe. Questo è il modo consigliato per rimuovere il bordo in HTML5.

Dai un'occhiata al mio strumento di generazione iframe html5 per personalizzare il tuo iframe senza modificare il codice.

La proprietà di stile può essere utilizzata per HTML5 se si desidera rimuovere il boder della cornice o qualsiasi cosa sia possibile utilizzare la proprietà di stile. come indicato di seguito

Il codice va qui

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

Aggiungi l'attributo frameBorder (maiuscola 'B').

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

Puoi anche farlo con JavaScript in questo modo. Troverà tutti gli elementi iframe e rimuoverà i loro bordi in IE e in altri browser (anche se puoi semplicemente impostare uno stile di "border: none;" nei browser non IE invece di usare JavaScript). E funzionerà anche se utilizzato DOPO che l'iframe viene generato e installato nel documento (ad es. Iframe che vengono aggiunti in semplice HTML e non JavaScript)!

Questo sembra funzionare perché IE crea il bordo, non sull'elemento iframe come ci si aspetterebbe, ma sul CONTENUTO dell'iframe - dopo la creazione dell'iframe nella distinta componenti. ($ @ & * # @ !!! IE !!!)

Nota: la parte IE funzionerà (ovviamente) solo se la finestra padre e iframe provengono dall'origine SAME (stesso dominio, porta, protocollo ecc.). Altrimenti lo script otterrà errori di "accesso negato" nella console degli errori di IE. In tal caso, l'unica opzione è impostarla prima che venga generata, come altri hanno notato, oppure utilizzare l'attributo frameBorder = "0" non standard. (o lascia che IE appaia fugly - la mia attuale opzione preferita;))

Mi ci sono volute molte ore di lavoro al punto di disperazione per capire questo ...

Godere. :)

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

Ho provato tutto quanto sopra e se non funziona per te prova il CSS sotto risolto il problema per me. Il che dice ai browser di non aggiungere alcun margine o riempimento.

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

Se il tipo di documento della pagina su cui stai posizionando l'iframe è HTML5, puoi utilizzare l' seamlessattributo in questo modo:

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

Documenti Mozilla sull'attributo seamless

Nel tuo foglio di stile aggiungi

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

}

Questa è anche un'opzione praticabile.

Se si utilizza iFrame per adattarsi alla larghezza e all'altezza dell'intero schermo, che presumo non siano basate sulle dimensioni 300x300, è necessario impostare i margini del corpo su "0" in questo modo:

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

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

Questo codice dovrebbe funzionare in HTML 4 e 5.

Aggiungi l'attributo frameBorder o usa lo stile con border-width 0px; oppure imposta lo stile del bordo uguale a nessuno.

utilizzare uno qualsiasi da sotto 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>

imposta anche border = "0px"

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

Provare

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

Ciò rimuoverà il bordo della cornice.

Usa questo

style="border:none;

Esempio:

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

Per rimuovere il bordo è possibile utilizzare la proprietà del bordo CSS su nessuno.

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

È semplice aggiungere l'attributo nel tag iframe frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

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. Tramite Tag Attribute frameBorder Set 0

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

3. se abbiamo più I Frame possiamo dare classe e mettere css in interno o esternamente.

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>

Ho avuto un problema con il bordo bianco inferiore e non sono riuscito a risolverlo con le regole di bordo, margine e riempimento ... Quindi aggiungi display:block;perché iframe è un elemento incorporato.

Questo tiene conto degli spazi bianchi nel tuo HTML.

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

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