0

我正在开发一个自定义网站构建器，并有一个 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 的高度并将其设置为容器？我正在尝试使用这个 iFrame Resizer ( https://github.com/davidjbradshaw/iframe-resizer )，但我认为我在 iframe 上使用的比例 css 搞砸了。该插件运行，然后我在底部有大量额外的空白。我已经尝试了他们所有的“heightCalculationMethod”，他们都有相同的结果。如果我使用这个 css 比例，有没有办法可以编写自己的自定义高度计算？

4

1 回答 1

0

让我首先说我不是 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 ------------->

我希望这有帮助。如果不是，那么我误解了并且很乐意提供帮助，但我需要更多关于您的要求的详细信息。

于 2017-03-14T15:41:13.997 回答