Magnific Popup iframe auto resize при изменении контента (перекрестный домен)

Question

На данный момент мы используем только тип iframe Magnific Popup (плагин jQuery). Однако всплывающее окно не изменяет размер своей высоты, когда содержимое iframe растет или сжимается динамически. Я думаю, что для встроенного изменения размера, похоже, работает.

Я искал документацию и Интернет, но не смог найти решение.

Поэтому я искал сторонние решения для автоматического изменения размера (кросс-домена) iframe при изменении контента. Best я нашел до сих пор (ищу простое решение) является:

jQuery resize event (с помощью вилки, потому что оригинал, кажется, не поддерживается)
, чтобы иметь возможность связать событие изменения размера в сочетании с:

jQuery postMessage (с использованием вилки по той же причине)
для осуществления междоменной связи между iframe и родителем (из-за той же политики происхождения).

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

Я получил тех, кто работает на простой тест IFRAME, теперь я хочу реализуйте это в Magnific Popup.

Как раз сейчас я столкнулся с событием изменения размера в документации, которая уже встроена в МФП: «триггеры изменения размера изменяются только при изменении высоты или принудительной компоновке». Однако он не срабатывает, когда я показываю больше/меньше текста в iframe на основе ввода select (только тест пока, но это то, что мне нужно в данный момент).

Итак, прежде чем внедрять все эти плагины, я подумал, может быть, я спрошу, есть ли у кого-то уже работающее решение для этого или если я просто упустил встроенную функцию/не использовал ее правильно. Я довольно новичок в JavaScript.

Заранее спасибо

Answer 1

Так, кажется, не будет построен в растворе для автоматического изменения размера (без видео) фреймов в Magnific Всплывающие я построил свой собственный решение с помощью внешних плагинов, как упоминалось выше.

Чтобы проверить, изменилась ли высота содержимого iframe, я использовал this Fork of jQuery resize event plugin, который совместим с текущей версией jQuery 1.11.1.

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

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

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

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

Answer 2

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

Это требует, чтобы вы добавить сценарий загрузки страницы :

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

Как и на странице внешнего вы пытаетесь загрузить Внутри :

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

Примечание: Если вы пытаетесь загрузить внешний домен whi ch не принадлежит вам, это может не сработать для вас - потому что у вас должен быть сценарий, добавленный в обоих местах (извините), но этот WILL работает, если вы пытаетесь загрузить страницу HTTPS на странице NON HTTPS.

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

 $(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>' 
       }, 
     }); 
     }); 

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

Одна из основных вещь, которую я понял, что на самом деле Magnific имеет размер обратного вызова, включенную в его коде:

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

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

Answer 3

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

Есть ли способ для iframe по-своему связываться со своим родительским окном. Вы можете изменить размер родителя с помощью этого кода на ваш 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 и изменить его оттуда. Надеюсь, это поможет кому-то.