25

div内にiframeがあります。iframe のサイズを親 div のサイズと正確に同じにしたい。次のコードを使用して、iframe の幅と高さを設定しました。

<iframe src="./myPage.aspx" id="myIframe" 
    style="position: relative; 
            height: 100%; 
            width: 100%' 
            scrolling='no' 
            frameborder='0'">

ただし、iframeの幅はdivと同じではなく、水平スクロールバーと垂直スクロールバーの両方が表示されます。

4

3 に答える 3

51

あなたはタイプミスが多いです。

正しいマークアップは次のようになります。

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0"
    style="position: relative; height: 100%; width: 100%;">
...
</iframe>

また、このフレームに既に ID がある場合は、これを (別のスタイルシート ファイルから) 次のようにCSSに入れてみませんか?

#myIframe
{
    position: relative;
    height: 100%;
    width: 100%; 
}

とHTML

<iframe src="./myPage.aspx" id="myIframe" scrolling="no" frameborder="0" > ... </iframe>

scrolling&frameborderはiframe属性であり、属性ではないことに注意してstyleください。

于 2013-09-12T13:38:29.717 に答える
9

CSS3 の時代なので、ビューポート ユニットを使用してこれを行うことができます。これらの単位を使用すると、ビューポートの幅とビューポートの高さのパーセンテージでサイズを指定できます。これはユーザーのビューポートで、スクリーンとも呼ばれます。ただし、私が試したすべての主要なブラウザーで、別の div 内にある div 内に iframe を配置し、相対的に配置すると、ビューポートの単位はこの div に対して相対的になります。そして、100 ビューポートの高さ単位は 100% の高さを意味するので、次のようにすることができます:

<div id="parent">
    <div id="wrapper" style="position:relative">
        <iframe style="position:absolute;top:0px;width:100%;height:100vh;" src="http://anydomain.com"></iframe>
    </div>
</div>

これはcross-domainであり、javascript やその他の複雑なものを使用せずに希望どおりに表示されるため、これが可能な限り最良のソリューションであることがわかりました。

そして最も重要なことは、すべてのブラウザーで動作することです。モバイルのブラウザーも含めて (Android と iPhone でテスト済み)!

于 2014-03-13T18:36:21.043 に答える
3

動的な高さを設定するには -

  1. クロスドメイン iFrame と親と通信する必要があります
  2. 次に、iframe のスクロールの高さ/コンテンツの高さを親ウィンドウに送信できます。

1 通信用

私が好む - https://ternarylabs.github.io/porthole/

2 実装

iframe の高さの変化を検出するには - https://marcj.github.io/css-element-queries/を使用します

<script src="https://raw.githubusercontent.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://raw.githubusercontent.com/ternarylabs/porthole/master/src/porthole.min.js"></script>

残りの実装については、要旨を参照してください -

https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8

親ウィンドウ:

(function(){

'use-strict';

//This soultion we have used  - https://ternarylabs.github.io/porthole/
// example - 

var iFrameId: 'guestFrame',
window.onload = function(){
    // Create a proxy window to send to and receive
    // messages from the iFrame
    var windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/', iFrameId);

    var $viewPort = $('#'+iFrameId);
    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(messageEvent) {
      
      if( messageEvent.data.height == $viewPort.height() ){
        return;
      }
        $viewPort.height(messageEvent.data.height);
    });

    Porthole.WindowProxyDispatcher.start();
};


})();

iframe ウィンドウ:

(function(){

'use-strict';

/**
 * Iframe to Parent window communication
 * sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
 * </iframe>
 * Uses https://ternarylabs.github.io/porthole/
 * Uses https://marcj.github.io/css-element-queries/  
 */
window.onload = function(){

  var proxy = window.proxy  = new Porthole.WindowProxy('http://parent-domain.com/');
  proxy.addEventListener(function(messageEvent) {
      // handle event
  });

  //Height setup
  var iframeHeight = 0;
  
  var element = document.getElementsByTagName("BODY")[0];
  new ResizeSensor(element, function() {
    
    var scrollHeight = $('body').outerHeight();
    if (iframeHeight === scrollHeight) return false;
    
    iframeHeight = scrollHeight;
    proxy.post({
      height: scrollHeight,
    });
    
  });

  Porthole.WindowProxyDispatcher.start();

};

})();
于 2016-08-12T12:25:14.033 に答える