[英]Issue with iFrame Element not re-sizing within container
我正在研究一个小型VA项目,我试图从其他网站上提取统计数据。 我能够找到如何做到这一点的唯一方法是使用带剪辑功能的iFrame。
网站是: NWGlobalVA.com
现在我遇到的问题是,如果你去主页并重新调整浏览器的大小,它会推动地图元素。 我已经尝试了我的知识和研究中的所有内容,以便使用容器重新调整大小。
下面是我使用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>
我处理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样式,以便我的方法正常工作。
在响应式设计中,我为iframe分配了一个在CSS内部调整大小的容器。 例如,
CSS
.iframe_container {
显示:内联;
向左飘浮;
宽度:89%; //你想要的任何宽度}
您将需要消除.iframeb绝对,右,左定位,因为容器会处理所有内容,除非您在地图顶部讨论'List'参数,我会尝试使用@media来安排根据.iframeb类的屏幕大小清理列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.