2009-10-26 17 views
33

iframeに国境が表示されており、削除できません。IE 8 iframe border

IE 6と少しのJavaScriptで意図したとおりに7作品:

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

しかし、境界線がサンプルHTMLが参考になるサンプルJSで行くことに

+0

StackOverflowには、質問を入力するテキスト領域の下に素晴らしいプレビュー領域があります。プレビューを使用して、投稿する前に次回に書式設定を修正します。 – OregonGhost

答えて

0

IE 8に表示されたまま=)

IE8の開発ツール(問題のあるページでF12キーを押してください)を使用して、iframeに適用されているスタイルを特定してみてください。また、スタイルを再生して繰り返し時間を短縮することもできます。

0

これは、CSSの境界設定を尊重していない可能性があります。 iframe要素の属性 BORDER=0の従来の設定が機能する場合があります。テストに値する、少なくとも。

編集:iframe要素にframeborder = '0'が設定されている問題を修正しているようです。それは少なくとも私のために働いた。

94

iframeタグに次の属性を追加します。

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

私はjQueryを使ってこれらを実際に追加しようとしましたが、IE8はそれらを無視するようです。私はハードコーディングされた属性をIE8に強制するために行った。 "IEはなぜこんなにゴミだ!"今日私のお気に入りのフレーズです - そして、私はクロスブラウザテストです: - D。 Hehe。これを理解してくれてありがとう! –

+2

FYI:残念ながら、ドキュメント内にframeborder属性をインラインで追加すると、ドキュメントはHTML 5の検証を行わないようになります。しかし、この問題を回避する方法は他にありません。 –

+7

W3Cの有効なソリューションはありますか? – enloz

17

私は動的に作成されたアイフレームと同じ問題を抱えていたし、それがドキュメントにインラインフレームを追加 AFTER ボーダーのプロパティを設定するNO効果を持っていることが判明:

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

次のコードは、3D境界を示しています

しかし、これは実際にそれを削除します。これはあなたの問題を解決するのに役立つだろうと

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

希望を。

1

このアイデアにはさまざまなバリエーションがありましたが、これらの行に沿って何かを使ってしまいました。私はそれを共有すると思った。

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

は、それから私は、すなわち、非JSのユーザーのための代替を入力するようにnoscript要素タグを使用:

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

私はIE8でそれをテストし、それが私のためにすべてのクールだし、それも検証します。

これは誰かを助けるかもしれないことを願っています!

1

成功!

これを試してください。 IEや他のブラウザでは、iframe要素を見つけてその枠線を削除します(JavaScriptを使用するのではなく、IE以外のブラウザでは「border:none;」というスタイルを設定できます)。 iframeが生成され、ドキュメントの所定の場所に置かれた後であっても使用できます(iframeはJavaScriptではなくプレーンHTMLで追加されます)。

これは、IEがiframe要素ではなく、iframeのCONTENTにBorderにiframeを作成した後で、境界線を作成するために機能します。 ($ @ & *#@ !!! IE !!!)

注:親ウィンドウとiframeが同じ元(同じドメイン、ポート、プロトコルなど)のものである場合、IE部分は(もちろん)機能します。そうしないと、スクリプトはIEエラーコンソールで「アクセス拒否」エラーを受け取ります。それが起こった場合、唯一のオプションは生成される前にそれを設定するか、他の人が指摘しているように設定するか、非標準のframeBorder = "0"属性を使用することです。 (または単にIEは非常に醜い見てみましょう - 私の現在のお気に入りのオプション;))

はこれを理解するために私に絶望のポイントに取り組んで多くの時間を要した...

お楽しみください。 :)

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

コードを検証するにはjavascriptでこれを行うことができます。私は数ヶ月前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); 

あなたがコピーした場合、あなたがこれを行うことができiframe内にシームレス別のページをロードし、ページの先頭にこのコードを貼り付けるfは、この問題を抱えていたとき、私は完璧な答えを見つけました。私は無料のスクリプトでサイトでそれを見つけました。ほとんどの場合、パフォーマンスは良好です

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

次に、iframeにIDを渡して、読み込んだときにスクリプトを呼び出します。こうやって。

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