如何使 iframe 的宽度和高度与其父 div 相同？

Posted 2023-02-22

【中文标题】如何使 iframe 的宽度和高度与其父 div 相同？

【英文标题】：How to make width and height of iframe same as its parent div?

【发布时间】：2013-09-16 22:16:34

【问题描述】：

我在 div 中有一个 iframe。我希望 iframe 的大小与其父 div 的大小完全相同。我使用以下代码设置 iframe 的宽度和高度。

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

但是iframe的宽度和div不一样，水平和垂直滚动条都会显示。

【问题讨论】：

你在width、scrolling 和frameborder 之后错过了;，' 在position 前面......

【参考方案1】：

你有很多错别字。

正确的标记应该是这样的：

<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 属性。

【讨论】：

对我来说位置：绝对有效，而不是位置：相对。从这里得到解决方案：***.com/questions/5272519/…

【参考方案2】：

由于我们处于 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 上测试）！

【讨论】：

cross-domain 必须在这里做什么？你的意思是cross browser？顺便说一句：在这种情况下，使用百分比单位比使用视口单位更容易、更安全。

100vh 的高度仅在 iframe 全屏时有效，否则它将是整个窗口的高度，不一定是内容的高度。与100%的高度相同。

【参考方案3】：

设置动态高度 -

我们需要与跨域 iFrame 和父级通信 然后我们可以将 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();

;

)();

【讨论】：

如果可能，“运行代码 sn-p”会出现一些错误，请解决。