Question

我正在开展一个小型VA项目，我正试图从另一个网站上提取统计数据。我能够找到如何做到这一点的唯一方法是使用带剪辑功能的iFrame。

现在我遇到的问题是，如果你去主页并重新调整浏览器大小，它会推动地图元素。我已经在我的知识和研究中尝试了一切，以便用容器重新调整大小。

下面是我使用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样式，以便我的方法正常工作。

Answer 2

在响应式设计中，我为iframe分配了一个在CSS内部调整大小的容器。例如，

<强> CSS
    .iframe_container {
        显示：内联;
        float：left;
        宽度：89％; //你想要的任何宽度     }

你需要消除你的.iframeb绝对，右，左定位，因为容器会处理所有这些，除非你在谈论地图顶部的'List'参数，我会尝试使用@媒体根据.iframeb类的屏幕大小排列干净的列表。

iFrame Element的问题没有在容器内重新调整大小

2 个答案: