Iframing адаптивный источник сайта + динамическая высота

Я работаю над создателем пользовательских сайтов и у меня есть 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), но я думаю, что шкала CSS, которую я использую в iframe, испортила его. Плагин запускается, а затем у меня тонна лишних пробелов внизу. Я перепробовал все их 'heightCalculationMethod', и все они имеют одинаковый результат. Есть ли способ, которым я могу написать свой собственный расчет высоты, если я использую эту шкалу CSS?

Источник

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 ------------->

Надеюсь, это поможет. Если нет, то я неправильно понял и хотел бы помочь, но мне нужно больше подробностей о ваших требованиях.

Источник
Другие вопросы по тегам