javascript - iFrame 元素未在容器内调整大小的问题

Question

我正在做一个小型 VA 元素，我正试图从另一个网站提取统计数据。我能够找到如何执行此操作的唯一方法是使用具有剪辑功能的 iFrame。

网站是:NWGlobalVA.com

现在我遇到的问题是，如果您转到主页并重新调整浏览器的大小，无论如何它都会推到 map 元素后面。我已经尝试了我的知识和研究中的一切，以使其随容器调整大小。

下面是我使用 iFrame 和 CSS 进行剪裁的代码。任何帮助将不胜感激，然后您就会明白。几天来我一直在尝试这样做。理想情况下，我宁愿每 15 分钟获取一次信息并将其传递到我的数据库。但是在网站上没有定义任何表格，我知道如何去做。

<style>   
.iframeb {   
    position: absolute;   
    left:-384px;   
    right:0px;   
    top: -145px;   
    clip: rect(190px, 625px, 350px, 400px);   
}</style> 


<iframe width="890" height="1900" src="http://fscloud-infotool.de/index.php?page=vasystem&subpage=vadetails&id=10277" class="iframeb" scrolling="no" frameborder="0"></iframe>

Answer 1

我处理 iframe 大小的方法是使用 javascript (jquery):

我通过取宽度/高度来计算原始 iframe 的纵横比。所以在你的情况下:890/1900。

<script>
function size_iFrame()
{
    // If the width and height of the iframe are set 
    // as attributes (<iframe width='890' height='1900'>), 
    // you can have the js calculate it for you.
    // aspect= $('iframe').attr('width') / $('iframe').attr('height');
    aspect= 0.47; 
    $('iframe').css('width', '100%');
    $('iframe').css('height', $('iframe').width() / aspect);
}
$(document).ready(function()
{
    size_iFrame();
    $(window).resize(function()
    {
        size_iFrame();
    });
}
</script>

这将使 iframe 适合其容器的宽度，并为其提供与最初相同的纵横比。

编辑:为了回答您的问题，我会在每次屏幕尺寸更改时从就绪回调和设置以及窗口调整大小回调中调用它。我编辑了上面的代码以显示这一点。

Edit2:正如@mugé 指出的那样，您还需要删除 iframe css 样式以使我的方法起作用。