Question

我正在使用自定义网站构建器，并将iframe作为响应式网站的预览。要让网站缩小＆＃39;所以网站不是移动尺寸我使用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的高度并将其设置为容器？我试图使用这个iFrame Resizer（https://github.com/davidjbradshaw/iframe-resizer），但我认为我在iframe上使用的缩放比例正在弄乱它。该插件运行，然后底部有一大堆额外的空白区域。我已经尝试了他们所有的＆＃39; heightCalculationMethod＆＃39;它们都有相同的结果。如果我使用这个css量表，有没有办法可以编写自己的自定义高度计算？

Answer 1

首先，我要说的是，我并非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 ------------->

我希望这会有所帮助。如果没有，那么我误解了并且愿意提供帮助，但我需要更多关于你的要求的细节。

Iframing响应网站来源+动态高度

1 个答案: