构建响应式网站源码+动态高度
我在一个自定义的网站建设者工作，并有一个iframe作为响应网站的预览。为了让网站“缩小”，使网站不是移动大小的，我使用css缩放和变换原点，如下所示：
<div class="panel panel-default" id="iframePanel">
<div class="panel-body" style="padding:0px;">
<div class="intrinsic-container">
<iframe id="display_frame" name="display_frame" class="frame" src="http://test.com" allowfullscreen></iframe>
</div>
</div>
</div><!--/row-->
<script type="text/javascript">
$('#display_frame').iFrameResize(
[
{
log: true,
checkOrigin: false
}
]
);
</script>
.intrinsic-container {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 100%;
border-radius: 4px;
}
#iframePanel {
margin-left: 20px;
}
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
background: #fff;
box-shadow: 1px 3px 16px #BEBEBE;
width: 200%;
height: 200%;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform: scale(0.50);
-moz-transform: scale(0.50);
-o-transform: scale(0.50);
-webkit-transform: scale(0.50);
transform: scale(0.50);
/* width: 100%;*/
}由于它是一个网站构建器，某些部分可以被隐藏，从而改变iframe的高度。如何获取iframe的高度并将其设置为容器？我正在尝试使用这个css Resizer (https://github.com/davidjbradshaw/iframe-resizer)，但我认为我在iFrame上使用的scale css把它搞乱了。插件运行，然后我在底部有一吨额外的空白。我已经尝试了他们所有的'heightCalculationMethod‘，他们都有相同的结果。如果我使用这个css标尺，有没有办法编写我自己的自定义高度计算？
回答 1
Stack Overflow用户
发布于 2017-03-14 23:41:14
首先我要说的是，我不能100%确定你想要实现的目标，因为你想要显示你的“预览站点”的方式受到了限制。
下面是我几年前写的东西，当你改变窗口大小时，它会动态地调整iframe的大小。我使用了2个文件，因为我动态地更改了很多你在PHP中看不到的不需要的文件，但如果需要的话，你可以组合使用1个文件。显然，我在这里的变量是特定于我的站点和我需要的大小的。此外，由于这是很久以前的事了，代码并不是最好的，如果你需要的话，它可能会变得更加模块化。另外，我只使用了原生JavaScript，没有使用jQuery。此外，我删除了所有无关的脚本和CSS，使其更具可读性。
文件1
<!---------- START HTML ------------->
<!DOCTYPE html >
<html>
<body onresize="return setSizeOnChange();">
<div id="page_container">
<div id="content">
<table id="table">
<tr>
<th id="table_left_top"></th>
<th id="table_center_top"></th>
<th id="table_right_top"></th>
</tr>
<tr>
<td id="table_left_middle"></td>
<?php
include("/var/www/html/secured/content/home_content.php");
?>
<td id="table_right_middle"></td>
</tr>
<tr>
<td id="table_left_bottom"></td>
<td id="table_center_bottom"></td>
<td id="table_right_bottom"></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
function setSizeOnChange()
{
window.setTimeout(function ()
{
var iframe = document.getElementById('home_content_iframe');
var bottom_menu = document.getElementById('bottom_menu');
var leftmenu = document.getElementById('leftmenu');
var window_height = $(window).height();
var window_width = $(window).width();
var height = window_height - 86;//113 //73 // - bottom_menu.offsetHeight
var width = window_width - leftmenu.offsetWidth - 60;//60
if(leftmenu.offsetWidth == 0)
{
iframe.width = width;
iframe.height = height;
}else
{
iframe.width = width + 25;
iframe.height = height + 17;
}
return true;
}, 90);
}
</script>
</body>
</html>
<!---------- END HTML ------------->文件2
<!---------- START HTML ------------->
<!DOCTYPE html>
<html>
<body onload="return setSize();">
<td id="table_center_middle">
<iframe src="../content/home_content_iframe.php" id="home_content_iframe" name="home_content_iframe"></iframe>';
</td>
<script type="text/javascript">
function setSize()
{
var iframe = document.getElementById('home_content_iframe');
var window_height = $(window).height();
var window_width = $(window).width();
var height = window_height - 86;//113
var width = window_width - 260;//260
iframe.height = height;
iframe.width = width;
return true;
}
</script>
</body>
</html>
<!---------- END HTML ------------->我希望这能帮到你。如果没有，那么我误解了，并愿意帮助，但我需要更多的细节，您的要求是什么。
https://stackoverflow.com/questions/42789801
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号