Question

下午好。

很简单，我需要白框的高度和宽度与iframe文字一致，我该怎么做？

function resizeIframe (iframeContentWidth, iframeContentHeight) {
    var container = window.frameElement.parentElement;
    if (container != parent.document.body) {
        container.style.width = iframeContentWidth + 'px';
        container.style.height = iframeContentHeight + 'px';
    }
    window.frameElement.style.width = iframeContentWidth + 'px';
    window.frameElement.style.height = iframeContentHeight + 'px';
    return;
}

html {
  background-color: #fff
}
div {
  background-color: #000;
display: inline-block;
}

<div>
  <iframe src="http://190.216.202.35/rxp/mobilpxr.php?stopid=502102" height="85px"  width="250px" scrolling="no" frameborder="0">
</div>

Answer 1

首先，很高兴知道您在HTML中使用的元素是如何工作的。

每个浏览器都有自己的iframe默认大小（如果大小不是由属性或CSS给出的话）。通常尺寸在300x200附近。加载到iframe中的文档正文会调整加载到iframe的iframe的宽度，如果定义了正文的任何大小，则根据内容定义高度。

div元素是块级元素，默认情况下，其父元素的宽度为100％，高度取决于内容高度。但是，当根据div的内容设置宽度时，可以通过为div设置CSS属性display: inline-block来更改此值。

在解析之前，客户端没有简单的方法来检测要加载的任意内容的大小，因此我们必须等待这种情况发生。我们可以等待iframe在父页面（=包含iframe的页面）上完成加载和解析，或者我们可以在iframe中完成。后者简化了引用，因此我们将在以下示例中使用它，即所有以下代码必须包含在加载到iframe的文件中。

iframe的正文：

<div>
    <span class="title">Capri A2</span>
    <br />
    <span class="big">Rutas aquí:  | P17 | E31 | T31 | E21</span>
</div>

iframe在iframe中调整大小：

window.onload = function () {
    var bodyWrapper = document.querySelector('div'),
        size;

    // Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too.
    bodyWrapper.style.display = 'inline-block';

    // Get the size information of bodyWrapper
    size = bodyWrapper.getBoundingClientRect();

    // Set the iframe size
    frameElement.style.width = size.width + 'px';
    frameElement.style.height = size.height + 'px';

    // Done!
    return;
}

iframe的大小不符合实际内容

1 个答案: