How to make width and height of iframe same as its

问题:

I have a iframe inside a div. I want the size of iframe to be exactly the size of its parent div. I used following code to set the width and height of iframe.

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

But width of iframe is not same as div, also both horizontal and vertical scrollbar are displayed.

回答1:

you have a lot of typos.

a correct markup should be like:

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

also, if this frame already has an ID, why don't you put this in CSS like this (from a separate stylesheet file):

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

and HTML

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

mind that scrolling & frameborder are iframe attribute, not style attribute.

回答2:

Since we are in the age of CSS3, you can do this by using viewport units. These units allow you to specify sizes in terms of percentages of the viewport width and viewport height. This is the user's viewport, also known as screen. However, in all major browsers I've tried it, if you put an iframe inside a div, which is inside another div and positioned relative, the viewport units are relative to this div. And since 100 viewport height units mean 100% height, you can do like this:

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

I find this to be the best solution possible, since it is cross-domain, and displays exactly like you want it without any javascript or other complex stuff.

And most importantly, it works on all browsers, even mobile ones (tested on android and iphone)!

回答3:

To set dynamic height -

1. We need to communicate with cross domain iFrames and parent
2. Then we can send scroll height/content height of iframe to parent window

1 For communication

I prefer - https://ternarylabs.github.io/porthole/

2 Implementation

To detect iframe height change - Uses 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>

For rest of the implementation refer gist -

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

Parent window:

(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 window:

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

};

})();