一个iframe的尺寸不符合实际的内容

很简单，我需要的白框的高度和宽度正好与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>

来源

2015-10-09 Nicolas Tenorio

如果IFRAME源不在[同一域（HTTPS：//developer.mozilla。 org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript）与父页面，没有什么可以做的。 – Teemu

是同一个域 –

然后[this]（http://stackoverflow.com/a/11807287/1169519）可能有帮助吗？虽然我不知道，但如何计算页面的重量（=质量）; ）。可能你的意思是“宽度”？ – Teemu

首先，这是很好的知道，怎么你在你的HTML工作中使用的元素。

每个浏览器都有自己的iframe默认大小，如果大小不是由属性或CSS给出的，则使用它。通常尺寸在300x200附近。加载到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>

I帧在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; 
}

来源

2015-10-09 22:11:14 Teemu

tnks是答案，但高度太短，我怎么修复它 –

尝试修复'div'中的无效HTML（无效标签'
'，和丢失在'iframe'中关闭'span'标签）。您可以从我的示例中复制粘贴正确的代码。 – Teemu

我修好了，但高度还是错的 –

试试这个，希望它能够解决您的问题。

设置的iframe "height:auto"

来源

2015-10-09 20:08:30 CreativePS

nop，没有工作，但tnks –

一个iframe的尺寸不符合实际的内容

回答

相关问题