Rimuovi il bordo da IFrame

https://stackoverflow.com/questions/65034

09-06-2019
|

Domanda

Come rimuovo il bordo da un file iframe incorporato nella mia app Web?Un esempio del iframe È:

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

Vorrei il passaggio dai contenuti della mia pagina ai contenuti della iframe essere senza soluzione di continuità, presupponendo che i colori di sfondo siano coerenti.Il browser di destinazione è solo IE6 e sfortunatamente le soluzioni per altri non saranno di aiuto.

Soluzione

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

Quindi sembrerebbe:

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

Altri suggerimenti

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 una maiuscola B.

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

Come da iFrame documentazione, frameBorder è deprecato ed è preferibile utilizzare l'attributo CSS "border":

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

Nota che la proprietà border CSS lo fa non ottenere i risultati desiderati in IE6, 7 o 8.

Oltre ad aggiungere l'attributo frameBorder potresti prendere in considerazione 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 problemi specifici del browser aggiungere anche frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" secondo 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>

Utilizza l'attributo HTML iframe frameborder

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

Nota:utilizzare la corniceBordine (cap B) per IE, altrimenti non funzionerà.Tuttavia, l'attributo iframe frameborder 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 utilizzando l'attributo scorrimentohttp://www.w3schools.com/tags/att_iframe_scrolling.asp

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

Inoltre puoi utilizzare 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 dovrebbe apparire come se fosse una parte del documento che lo contiene (senza bordi o barre di scorrimento).Al momento, l'attributo seamless del tag è supportato solo in Opera, Chrome e Safari.Ma nel prossimo futuro diventerà 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.

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

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

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

È possibile utilizzare la proprietà Style Per HTML5 se vuoi rimuovere il bordo del frame o qualsiasi altra cosa puoi usare la proprietà style.come indicato di seguito

Il codice va qui

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

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 "border:none;" nei browser non IE invece di utilizzare JavaScript).E funzionerà anche se utilizzato DOPO che l'iframe è stato generato e inserito nel documento (ad es.iframe aggiunti in semplice HTML e non in JavaScript)!

Sembra funzionare perché IE crea il bordo, non sull'elemento iframe come ti aspetteresti, ma sul CONTENUTO dell'iframe, dopo che l'iframe è stato creato nella distinta base.($@&*#@!!!CIOÈ!!!)

Nota:La parte IE funzionerà (ovviamente) solo se la finestra principale e l'iframe provengono dalla STESSA origine (stesso dominio, porta, protocollo ecc.).Altrimenti lo script riceverà errori di "accesso negato" nella console degli errori di IE.Se ciò accade, l'unica opzione è impostarlo prima che venga generato, come altri hanno notato, o utilizzare l'attributo frameBorder="0" non standard.(o semplicemente lascia che IE abbia un aspetto fugace: la mia attuale opzione preferita ;))

Mi ci sono volute MOLTE ore di lavoro fino alla disperazione 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.
         }
   }

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

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

Documenti Mozilla sull'attributo seamless

Ho provato tutto quanto sopra e se non funziona per te, prova il CSS seguente che mi ha risolto il problema.Che dice semplicemente ai browser di non aggiungere alcun riempimento o margine.

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

Nel tuo foglio di stile aggiungi

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

}

Anche questa è un'opzione praticabile.

Se stai utilizzando iFrame per adattare la larghezza e l'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;">

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

imposta anche border="0px "

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

Tentativo

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

Questo rimuoverà il bordo della cornice.

Usa questo

style="border:none;

Esempio:

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

Aggiungi l'attributo frameBorder o usa lo stile con larghezza del bordo 0px; oppure imposta lo stile del bordo su none.

usane uno qualsiasi tra i 3 seguenti:

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

Per rimuovere il bordo puoi utilizzare la proprietà CSS border su none.

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

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

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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow