DiggBar はドメイン以外のコンテンツに基づいて iframe の高さをどのように動的に変更するのでしょうか?

StackOverflow https://stackoverflow.com/questions/754519

  •  09-09-2019
  •  | 
  •  

質問

すでに誰かが質問していますが、 DiggBar はどのように機能しますか? 以前の質問で。

誰かがまともな答えを提供しましたが、それは1つのことに対処していませんでした。

Diggは、異なるドメインにまたがるサイトのコンテンツに基づいて、どのようにIFRAMEの高さを動的にサイズ変更しますか？

SOには、コンテンツに基づいてiframeの高さを動的に調整するための質問と回答がたくさんあります（JavaScriptを使用） フレーム化された URL が独自のドメインにある限り。 しかし、Digg は、あらゆるドメインの Web サイトでこの問題を解決したようです。

SO Web プログラマーで、どのようにしてそれを実現したかを知っている人はいますか?

注記：iframe は単純に高さ 100% に設定されるわけではありません。iframe タグは単純にそのように機能しません。Googleで「100% height iframe」と検索すれば、私の言いたいことがわかるでしょう。

役に立ちましたか？

解決

見てみると 彼らのCSS, 、彼らは使用します height: 100% のために iframe:

iframe#diggiFrame {
    color: #666;
    width: 100%;
    height: 100%;
    z-index: 10;
    -webkit-box-sizing: border-box;    
}

DiggBar をその上に高さで配置します。 46px, 、それで、 iframe 残りのスペースを 100% 占有します。彼らは使用します overflow: hidden で body を保持する要素 iframe ページをスクロールさせるのではなく、完全にページの垂直高さ内に収まります。これは、スクロール バーが iframe, ページ全体ではなく、DiggBar の動作方法は、Firefox の Quirks モードでのみ機能することに注意してください。標準モードでこれを行う方法については、以下を参照してください。

body {
    padding: 46px 0 0 0;
    margin: 0;
    background: #fff;
    overflow: hidden; 
    color: #333;
    text-align: left;
}

#t {
    width: 100%;
    min-width: 950px;
    height: 46px;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    /* overflow: hidden; */
    border-bottom: 1px solid #666;
    background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
    line-height: 1;
}

編集:私の言うことが信じられない人のために、ここに挙げておきます。 小さな例. 。スペース全体を埋めるには、境界線がないように設定する必要があります。 <body> 余白がないこと。

編集2:ああ、ごめんなさい、あなたの言っていることはわかりました。必要なのは、 overflow: hidden で body タグを使用して、スクロール バーを希望どおりに動作させることができます。

編集3:これを Firefox で動作させるには、quirks モードにする必要があるようです。を含めると <!DOCTYPE html> 宣言すると標準モードになり、 iframe 小さくなりすぎます。

編集4:ああ、Firefox の標準モードでもできます。答えが分かりました ここ. 。高さを設定する必要があります <html> そして <body> 要素を 100% 同じように。(注意してください。 <!DOCTYPE html> のドキュメントタイプです HTML5, 、これは進行中の作業です。ただし、標準モードをオンにすると、最新のすべてのブラウザで機能します)。

<!DOCTYPE html>
<html>
<head>
  <style type="text/css" media="all">
    html, body {
      height: 100%
    }
    body {
      margin: 0;
      overflow: hidden;
    }
    #topbar {
      height: 50px;
      width: 100%;
      border-bottom: 1px solid #666
    }
    #iframe {
      height: 100%;
      width: 100%;
      border-width: 0
    }
  </style>
</head>
<body>
  <div id="topbar">
    <h1>This is my fake DiggBar</h1>
  </div>
  <iframe id="iframe" src="http://www.google.com/"></iframe>
</body>

他のヒント

HTMLでの問題の一部は、あなたはわずか100％の高さへの任意のものの要素を設定し、それがウィンドウ全体のスペースを取ることはできません。これを行う1つの方法は、体は、ウィンドウのサイズになりますウィンドウのピクセルの高さを100％に設定し、本体内部の任意のものを持っていることによって、である。

基本的にはちょうど窓てonResizeイベントに結び付けJavaScriptを作成し、それは、ウィンドウのサイズにまで身体のサイズを変更する必要があります。

ここではjQueryを使って私が作った例がある。

<script language="JavaScript" type="text/JavaScript">
    $(window).resize(function() {
        $('body').height(document.documentElement.clientHeight);
    });
</script>

これを使用すると、divのか、別の要素を設定し、それは、ウィンドウの完全な高さで仕事を持っていることができるようになります。

のiframeはQuirksモードで高さが100％を持つことができます。 DiggはDOCTYPEを除外することによってこれを実現します。

のiFrameは、内部のターゲットウェブサイト、周りにいない他の方法とのDiggのウェブサイトです。 iFrameの100％の幅と高さに設定されている。

iframe内に100％が宣言されて、親のスペースの100％のパーセントです。例があります：

/* parent element */

html, body {
   width: 100%;
   height: 100%;
}

/* child element */
iframe {
  width: 100%; /* this is truly 100%, try it out */
  height: 100%; /* try it out */
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top