iFrameコンテンツがIEのスクロールボックスに押し込まれました

Question

動的にサイジングされたiFrameに問題があります。基本的にIE 7,8,9では完全に動作しますが、Quirksモードでのみ動作し、chromeとfirefoxで正しく動作します。だから私の問題は、標準的なドキュメントモードに関連しています7,8,9。

標準形式のIEでは、垂直スクロールバーのみを使用してコンテンツを高さ約200ピクセルのスクロールボックスに圧縮します。私は特定の高さ、すなわち高さ100％の代わりに600pxを使用するようにスタイルを編集することができます。しかし、内容の性質は高さの点では少しばらつきます。

誰にもこれに対する解決策はありますか？ちょっと変わったようですね！

Scrolling = noは、絞られたコンテンツを維持しています。私はそれをスクロールできません。 CSSのオーバーフローは何もしていません。何か案は？

Answer 1

私はそれはjavascriptのコードザッツjQueryの

MyLibrary = { 
    iframeApp: function(options) { 
     var $app = $(window[options.name]), 
      $appContainer = $(options.wrapperId); 

     window.setInterval(function() { 
      var frameEl = $app[0].frameElement, 
       frameDoc = 0, 
       height = 0; 

      if (frameEl.contentDocument !== undefined) { 
       frameDoc = frameEl.contentDocument, 
       height = frameDoc.height || frameDoc.body.offsetHeight; 
      } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) { 
       frameDoc = frameEl.document.documentElement, 
       height = frameDoc.offsetHeight; 
      } 
      $appContainer.css("height", height); 
     }, 500); 
    } 
} 

を使用しています+ IE 7で実行するソリューションを持っています。ここにhtmlがあります。

<div id="iframe-runner"> 
    <iframe scrolling="no"frameborder="0"name="myiframe"class="myiframe"src="http://mysrc.com/sweet-i-frame-app"width="100%"height="100%"></iframe> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     MyLibrary.iframeApp({ 
      name: "myiframe", 
      wrapperId: "#iframe-runner" 
     }); 
    }) 
</script> 

---

は、1つのページでそれを実行：

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> 
<div id="iframe-runner"> 
    <iframe scrolling="no"frameborder="0"name="myiframe"class="myiframe"src="http://mysrc.com/sweet-i-frame-app"width="100%"height="100%"></iframe> 
</div> 
<script type="text/javascript"> 
    $(function() { 
     iframeApp({ 
      name: "myiframe", 
      wrapperId: "#iframe-runner" 
     }); 
    }) 
    function iframeApp(options) { 
     var $app = $(window[options.name]), 
      $appContainer = $(options.wrapperId); 

     window.setInterval(function() { 
      var frameEl = $app[0].frameElement, 
       frameDoc = 0, 
       height = 0; 

      if (frameEl.contentDocument !== undefined) { 
       frameDoc = frameEl.contentDocument, 
       height = frameDoc.height || frameDoc.body.offsetHeight; 
      } else if (frameEl.document !== undefined && frameEl.document.documentElement !== undefined) { 
       frameDoc = frameEl.document.documentElement, 
       height = frameDoc.offsetHeight; 
      } 
      $appContainer.css("height", height); 
     }, 500); 
    } 
</script> 

あなたはあなたがスムーズに遷移/少ないタイムラグのために変化率を変更することができ、アイフレームSRC