2009-10-26 14 views
33

Na stronie iframe znajduje się obramowanie, którego nie mogę się pozbyć.IE 8 ramka obramowania

IE 6 i 7 działa prawidłowo z niewielką JavaScript:

function test(){ 
    var iframe = document.getElementById('frame2'); 
    iframe.contentWindow.document.body.style.backgroundColor = "#a31d1d"; 
    iframe.contentWindow.document.body.style.border = "#a31d1d"; 
    iframe.contentWindow.document.body.style.outlineColor = "#a31d1d"; 
} 

Ale granica pozostaje widoczna w IE 8.

+0

StackOverflow ma wielki obszar podglądu poniższego pola tekstowego, w którym podać swoje pytanie. Użyj tego podglądu, aby naprawić formatowanie następnym razem przed opublikowaniem. – OregonGhost

Odpowiedz

0

Przykładowy kod HTML, aby przejść z JS próbki byłoby pomocne =)

Spróbuj użyć narzędzi programistycznych IE8 (naciśnij klawisz F12 na stronie, z którą masz problemy), aby wyizolować style zastosowane w elemencie iframe. Możesz także grać z tymi stylami, aby skrócić czas iteracji.

0

Należy pamiętać, że może to być IE nie respektując ustawień obramowania w css, , podczas gdy tradycyjne ustawienie atrybutu BORDER=0 na elemencie iframe może działać. Przynajmniej warto przeprowadzić test.

Edytuj: Wygląda na to, że problem polega na ustawieniu frameborder = '0' na elemencie iframe. To przynajmniej dla mnie zadziałało.

94

Dodaj następujący atrybutów iframe tagu:

marginheight="0" marginwidth="0" frameborder="0" 
+1

Próbowałem używać jQuery, aby dodać je w sposób pragmatyczny, ale IE8 wydaje się po prostu zignorować je; po marnowaniu zbyt dużej ilości czasu na próbę ukrycia granicy (co za trywialne zadanie?) poszedłem z zakodowanymi atrybutami, aby wymusić to dla IE8. "dlaczego IE jest tak banialuki !?" to moja ulubiona fraza dzisiaj - i tak, jestem testowaniem w różnych przeglądarkach :-D. Hehe. Dzięki, że to wymyśliliście! –

+2

FYI: Niestety dodanie atrybutu frameborder inline w dokumencie spowoduje, że dokument nigdy nie będzie sprawdzany pod kątem HTML 5. Ale wydaje się, że nie ma innego sposobu obejścia tego problemu. –

+7

Jakiekolwiek prawidłowe rozwiązanie W3C? – enloz

17

miałem ten sam problem z iframe tworzonych dynamicznie, a okazało się, że ustawienie właściwości granicznych PO dodanie iframe do dokumentu ma NO efekt :

Poniższy kod 3d granicznych:

var iframe = document.createElement("IFRAME"); 
iframe.src = "http:www.stackoverflow.com"; 
//Iframe added BEFORE setting border properties. 
document.body.appendChild(iframe); 
iframe.frameBorder = "no"; 

Ale to faktycznie usuwa go:

var iframe = document.createElement("IFRAME"); 
iframe.src = "http:www.stackoverflow.com"; 
iframe.frameBorder = "no"; 
//Iframe added AFTER setting border properties. 
document.body.appendChild(iframe); 

nadziei, że to pomoże w rozwiązaniu problemu.

1

Próbowałem wiele wariantów tego pomysłu i skończyło się na używaniu czegoś wzdłuż tych linii. Pomyślałem, że to podzielę.

<script type="text/javascript"> 
    url = 'http://www.dollypower.com'; 
    title = 'Dolly Power'; 
    width = '660'; 
    height = '430'; 
    document.write('<iframe src='+url+' title='+title+' width='+width+' height='+height+' frameborder=0></iframe>'); 
</script> 

Następnie użyłem noscript tags wprowadzić alternatywę dla użytkowników non-JS, tj:

<noscript><p><a href="http://www.dollypower.com" target="_blank">Please click here for Dolly Power</a></p></noscript> 

testowałem go w IE8 i to wszystko jest fajne dla mnie, a także sprawdza.

Mam nadzieję, że to może pomóc komuś tam być!

1

Sukces!

Spróbuj tego. Znajdzie wszystkie elementy iframe i usunie ich granice w IE i innych przeglądarkach (chociaż możesz ustawić styl "border: none" w przeglądarkach innych niż IE zamiast JavaScript). I zadziała, nawet jeśli zostanie użyte PO utworzeniu elementu iframe i na miejscu w dokumencie (np. Ramek, które są dodawane w prostym kodzie HTML, a nie w JavaScript)!

Wygląda na to, że działa, ponieważ IE tworzy obramowanie, a nie element iframe, jak można się spodziewać, ale na ZAWARTOŚCI elementu iframe - po utworzeniu elementu iframe w zestawieniu komponentów. ($ @ & * # @ !!! IE !!!)

Uwaga: Część IE będzie działać (oczywiście), jeśli okno nadrzędne i element iframe pochodzą z SAMEGO początku (ta sama domena, port, protokół itp.). W przeciwnym razie skrypt dostanie błędy "odmowa dostępu" w konsoli błędów IE. Jeśli tak się stanie, jedyną opcją jest ustawienie go przed wygenerowaniem, jak zauważyli inni, lub użycie niestandardowego atrybutu frameBorder = "0". (Lub po prostu niech IE patrzeć fugly - mój aktualny faworyt opcja;))

Zajęło mi wiele godzin pracy do punktu rozpaczy do tego dojść ...

Enjoy. :)

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

Jeśli chcesz, aby Twój kod sprawdzał poprawność, możesz to zrobić za pomocą javascript. Znalazłem doskonałą odpowiedź, gdy miałem ten problem kilka miesięcy temu here

var iframe = document.createElement("iframe"); 
iframe.src = "banner_728x90.gif"; 
iframe.width = "728"; 
iframe.height = "90"; 
iframe.frameBorder = "0"; 
iframe.scrolling = "no"; 
document.body.appendChild(iframe); 

f chcesz załadować inną stronę bez szwu w iframe można to zrobić, jeśli skopiuj i wklej ten kod na czele swojej stronie . Znalazłem go na stronie z darmowymi skryptami. Spektakl jest dobre w większości przypadków

function getDocHeight(doc) { 
    doc = doc || document; 
    var body = doc.body, html = doc.documentElement; 
    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 
    return height; 
} 
function setIframeHeight(id) { 
    var ifrm = document.getElementById(id); 
    var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document; 
    ifrm.style.visibility = 'hidden'; 
    ifrm.style.height = "10px"; // reset to minimal height in case going from longer to shorter doc 
    ifrm.style.height = getDocHeight(doc) + 10 + "px"; 
    ifrm.style.visibility = 'visible'; 
} 

wtedy dać iframe id i wywołać skrypt na obciążenia. Oto jak.

var iframe = document.createElement("iframe"); 
iframe.setAttribute('id', "ifrm1"); 
iframe.setAttribute('src', 'http://www.hekcmviw.com/'); // change the URL 
iframe.setAttribute('width', '100%'); 
iframe.setAttribute('height', '10'); 
iframe.setAttribute('frameBorder', '0'); 
iframe.setAttribute('scrolling', 'no'); 
iframe.setAttribute('onload' ,"setIframeHeight(this.id)"); 
document.body.appendChild(iframe);