Автоматическое изменение размера всплывающего окна Magnific Popup iframe при изменении содержимого (междоменное)

Вы можете использовать: https://github.com/davidjbradshaw/iframe-resizer

Для этого необходимо добавить скрипт на страницу, загружающую <iframe>:

<script type="text/javascript" src="../iframeResizer.min.js"></script> 

А также на внешнюю страницу, которую вы пытаетесь загрузить внутри <iframe>:

<script type="text/javascript" src="../iframeResizer.contentWindow.min.js"></script>

Примечание. Если вы пытаетесь загрузить внешний домен, который вам не принадлежит, это может не сработать для вас, потому что вы должны добавить скрипт в оба места (извините), но это будет работать, если вы пытаетесь загрузить HTTPS. страница внутри страницы НЕ HTTPS.

Я также определяю свою собственную разметку для всплывающего окна Magnific в скрипте.

      $(document).ready(function() {
        $('.open-popup').magnificPopup({
            items: {src: '/file.html'},
            type: 'iframe',
              iframe: {
                 markup: '<div class="iframe-popup">'+
                            '<iframe class="mfp-iframe" frameborder="0" scrolling="no" allowtransparency="true" allowfullscreen></iframe>'+
                            '<div class="mfp-close"></div>'+
                          '</div>'
              },
        });
      });

Вы можете легко изменить ширину iframe с помощью CSS до 100% родительского окна... если у вас есть max-width для вашего родителя (.iframe-popup в приведенном выше примере).

Одна важная вещь, которую я понял, это то, что magnific на самом деле имеет обратный вызов resize, включенный в его код:

    callbacks: {
        resize: function() {
            $('iframe').iFrameResize([{
                enablePublicMethods: true,
                checkOrigin: false
            }]);
         }

Вот и все. Работает для меня каждый раз.

Поскольку в Magnific Popup нет встроенного решения для автоматического изменения размера iframe (не видео), я создал собственное решение с использованием внешних плагинов, как упоминалось выше.

Чтобы проверить, изменилась ли высота содержимого iframe, я использовал этот форк подключаемого модуля события изменения размера jQuery, который совместим с текущей версией jQuery 1.11.1.

Чтобы отправить новую высоту из iframe в родительское окно (совместимость между доменами), я использовал этот jQuery Плагин postMessage, который хорошо поддерживается и работает в IE6+.

Кроме того, я переключился на использование «type: inline» Magnific Popup для отображения iframe, поскольку «type: iframe», по-видимому, специально разработан для встраивания видео iframe, например видео YouTube, из-за чего мне было трудно стилизовать высоту всплывающего окна в простой способ.

Может быть более чистое/прямое решение, поэтому я не стал вдаваться в подробности. Другая причина заключается в том, что я использовал довольно много строк кода для реализации в MFP, и, поскольку я новичок в JS, это может быть не лучший код;) Но, поскольку ответа еще не было, я пока отмечу это как принятый ответ, потому что оно работает.

Лучшее решение, конечно, было бы, если бы у Magnific Popup было встроенное решение (запрос функции!).

Я искал решение этой проблемы и нашел только простое решение для связи без междоменного обмена без использования плагина. (Я не тестировал междоменные, но не могу сказать, что это не сработает).

Для фреймов есть способ по своей сути взаимодействовать с родительским окном. Вы можете изменить размер родителя с помощью этого кода в вашем iframe

<script>
    $(document).ready(function() {

        // access the iframe's parent in order to resize
        var contentHeight           = $('.your-iframe-wrapper').height(),
            parentBody              = window.parent.document.body;          

        $('iframe', parentBody).animate({
            height: contentHeight + 100,
            maxHeight : "100%"
        }, 200)     

    });

</script>

Когда ваш iFrame загружается, он должен запустить этот скрипт и получить доступ к родительскому окну iFrame и изменить его размер оттуда. Надеюсь, это поможет кому-то.