web-dev-qa-db-ja.com

IE 8 iframeボーダー

iframeに境界線が表示されており、それを取り除くことができません。

IE 6および7は、小さな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";
}

しかし、境界線はIE 8.でも表示されたままです。

javascripthtmlcssiframeinternet-explorer-8
34
Terry

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

marginheight="0" marginwidth="0" frameborder="0"
94
Assaf Feldman

動的に作成されたiframeにも同じ問題があり、境界線プロパティの設定[〜＃〜] after [〜＃〜] iframeをドキュメントに追加すると[〜＃ 〜] no [〜＃〜]効果：

次のコードは、3Dボーダーを示しています。

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

しかし、これは実際にそれを削除します：

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

これが問題の解決に役立つことを願っています。

17
MK.

成功！

これを試して。 IEおよびその他のブラウザーでiframe要素を見つけて境界線を削除します（ただし、JavaScriptを使用する代わりに、IE以外のブラウザーで "border：none;"のスタイルを設定することができます）。さらに、iframeが生成されてドキュメント内に配置された後で使用しても機能します（例：JavaScriptではなくプレーンHTMLで追加されたiframe）。

IEは、予想どおりにiframe要素ではなく、iframeのコンテンツ上に境界を作成するため、BOMでiframeが作成された後、これが機能するようです。（$ @＆*＃@ !!! IE !!!）

注：IEパーツは、親ウィンドウとiframeが同じドメイン（同じドメイン、ポート、プロトコルなど）からのものである場合にのみ（もちろん）機能します。それ以外の場合、スクリプトは「アクセス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.
         }
   }
1
FirstFraktal

私はこのアイデアのバリエーションをたくさん試し、結局これらの線に沿って何かを使用することになりました。共有したいと思いました。

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

次に、noscriptタグを使用して、JS以外のユーザーの代替を入力しました。

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

私はそれをIE8でテストしましたが、それはすべて私にとってクールであり、検証も行います。

これが誰かに役立つことを願っています！

1
Rachel

これはIE CSSの境界線設定を考慮しない場合があることを覚えておいてください。 一方、属性の従来の設定BORDER=0 iframe要素で機能する場合があります。少なくともテストに値する。

編集：問題を解決するのは、iframe要素でframeborder = '0'を設定することです。それは少なくとも私にとってはうまくいった。

0
Kzqai

コードで検証したい場合は、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にシームレスにロードする場合は、このコードをコピーしてページのヘッドに貼り付けると、これを行うことができます。無料のスクリプトのあるサイトで見つけました。ほとんどの場合、パフォーマンスは良好です

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);
0
Kevin Lynch

サンプルJSに合わせたサンプルHTMLは役に立ちます=）

IE8の開発者ツール（問題のあるページでF12キーを押す）を使用して、iframeに適用されているスタイルを特定してみてください。そこにあるスタイルで遊んで、反復時間を短縮することもできます。

0
Dan Davies Brackett