Rimuovi il bordo da IFrame

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>

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.

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 > 

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>

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

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.

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

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

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

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

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

Nel tuo foglio di stile aggiungi

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

}

Questa è anche un'opzione praticabile.

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

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

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

imposta anche border = "0px"

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

Provare

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

Questo rimuoverà il bordo della cornice.

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>

Usa questo

style="border:none;

Esempio:

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

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

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>