it-swarm.it

Rimuovi il bordo da IFrame

Come rimuovo 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 al contenuto di iframe fosse perfetta, assumendo che i colori di sfondo siano coerenti. Il browser di destinazione è solo IE6 e purtroppo le soluzioni per gli altri non saranno d'aiuto.

645
JoelB

Aggiungi l'attributo frameBorder (nota il maiuscolo 'B' ).

Quindi sembrerebbe:

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

Dopo essere diventato matto nel tentativo di rimuovere il bordo in IE7, ho scoperto che l'attributo frameBorder è case sensitive.

Devi impostare l'attributo frameBorder con un maiuscoloB.

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

Come per iframe documentation, frameBorder è deprecato e si usa l'attributo CSS "border":

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>
  • Nota La proprietà del bordo CSS fa non raggiunge i risultati desiderati in IE6, 7 o 8.
64

Oltre ad aggiungere l'attributo frameBorder, potresti voler considerare l'impostazione dell'attributo scrolling 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 > 
53
xenox

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

Usa l'attributo frameborder HTML iframe

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

Nota: usa frameBorder (cap B) per IE, altrimenti non funzionerà. Ma l'attributo frameborder iframe non è supportato in HTML5. Quindi, usa invece CSS.

<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 seamless del tag iframe è supportato solo in Opera, Chrome e Safari. Quando presente, specifica che l'iframe deve apparire come se fosse una parte del documento che lo contiene (senza bordi o barre di scorrimento). A partire da ora, l'attributo seamless 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

9
Shubham Badal

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

Controlla il mio generatore HTML iframe tool per personalizzare il tuo iframe senza modificare il codice.

8
Shan Eapen Koshy

È possibile utilizzare la proprietà Style Per HTML5 se si desidera rimuovere il bordo della cornice o qualsiasi cosa è possibile utilizzare la proprietà style. come indicato di seguito

Il codice va qui

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

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

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

Se il doctype della pagina su cui stai posizionando l'iframe è HTML5, puoi utilizzare l'attributo seamless in questo modo:

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

Documenti di Mozilla sull'attributo seamless

6
David Tuite

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

Questo sembra funzionare perché IE crea il bordo, non sull'elemento iframe come ci si aspetterebbe, ma sul CONTENUTO dell'iframe - dopo che l'iframe è stato creato nella BOM. ($ @ & * # @ !!! IE !!!)

Nota: la parte IE funzionerà (ovviamente) solo se la finestra genitore e iframe provengono da SAME Origin (stesso dominio, porta, protocollo ecc.). In caso contrario, lo script riceverà gli errori di "accesso negato" nella console di errore IE. Se ciò accade, l'unica opzione è impostarla prima che venga generata, come altri hanno notato, o utilizzare l'attributo frameBorder = "0" non standard. (o lascia solo IE sembrare fugly - la mia opzione preferita corrente;))

Mi ci sono voluti MOLTE ore di lavoro fino al punto di disperare per capirlo ...

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.
         }
   }
6
FirstFraktal

Nel tuo foglio di stile aggiungi

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

}

Questa è anche un'opzione praticabile.

5
Tropilac

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

* {
  padding:0px;
  margin:0px;
 }
5
th0ward
<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

Questo codice dovrebbe funzionare sia in HTML 4 che in 5.

4
IamGuest

Se stai utilizzando l'iFrame per adattarlo alla larghezza e all'altezza dell'intero schermo, che presumo tu non sia basato sulla dimensione 300x300, devi anche impostare i margini del corpo su "0" in questo modo:

<body style="margin:0px;">
4
Michael Herr

imposta anche border = "0px"

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

Provare

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

Questo rimuoverà il bordo della cornice.

2
Amaan Iqbal

Aggiungere l'attributo frameBorder o utilizzare lo stile con 0px border-width; oppure impostare lo stile del bordo uguale a none.

usa qualcuno dal basso 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>
2
Divya Chugh

Usa questo

style="border:none;

Esempio:

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

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

1
Chetan Chauhan

Per rimuovere il bordo puoi usare la proprietà del bordo CSS su none.

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