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 时代，您可以通过使用视口单元来做到这一点。这些单位允许您根据视口宽度和视口高度的百分比来指定大小。这是用户的视口，也称为屏幕。但是，在我尝试过的所有主要浏览器中，如果您将 iframe 放在一个 div 内，该 div 在另一个 div 内并相对定位，则视口单位是相对于该 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>

我发现这是最好的解决方案，因为它是跨域的，并且完全按照你想要的方式显示，没有任何 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 回答