Кросс-доменный iframe resizer используя postMessage - PullRequest
Новая
       22

Кросс-доменный iframe resizer используя postMessage

3 голосов
/ 23 сентября 2011

Я прочитал все междоменные посты iframe здесь (спасибо всем вам!) И в других местах.

Скрипт postMessage на междоменный перефразер iframe? прекрасно работаетв Firefox 5 и выше.Он изменяет размер iframe при каждом щелчке по странице внутри iframe.

Но в IE (7 8 или 9) он не изменяется вообще (7, 8 или 9) на моем компьютере.Я проверил настройки безопасности и тот, который в IE для доступа через домены, был проверен, чтобы включить.

PostMessage не работает в IE?- Или есть что-то еще, что нужно добавить?спасибо

Ответы [ 4 ]

4 голосов
/ 25 мая 2012

Это отличный скрипт от thomax - он также работает, поэтому вы можете использовать iframes на мобильных устройствах - iphones and android

Для IE7 и IE8, вы должны использовать window.attachEvent вместо window.addEventListenerтакже отправьте сообщение вместо сообщения (см. ниже), ps вам также нужно сделать то же самое на сервере с содержимым, публикующим его размер 

<script type="text/javascript">
if (window.addEventListener)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
else if (window.attachEvent)
{
  function resizeCrossDomainIframe(id) {
    var iframe = document.getElementById(id);
    window.attachEvent('onmessage', function(event) {
      var height = parseInt(event.data) + 32; 
      iframe.height = height + "px";
    }, false);
  }
}
</script>
1 голос
/ 02 февраля 2014

Изучив множество различных решений, я написал простой плагин jQuery, чтобы учесть различные варианты использования.Поскольку мне нужно было решение, которое поддерживало бы несколько пользовательских сгенерированных iFrames на странице портала, поддерживаемые размеры браузера и могли справляться с загрузкой JavaScript на главной странице после iFrame.Я также добавил поддержку изменения размера по ширине и функцию обратного вызова и разрешил переопределение body.margin, так как вы, вероятно, захотите установить этот параметр на ноль.

https://github.com/davidjbradshaw/iframe-resizer

пользователи главной страницы jQuery, код iframe - это просто небольшой автономный JavaScript, поэтому он является хорошим гостем на страницах других людей.

Затем jQuery инициализируется на главной странице и имеет следующие доступные опции.Подробнее о том, что они делают, можно узнать на странице GitHub. 

$('iframe').iFrameSizer({
    log: false,
    contentWindowBodyMargin:8,
    doHeight:true,
    doWidth:false,
    enablePublicMethods:false,
    interval:33,
    autoResize: true,
    callback:function(messageData){
        $('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id + 
                            ' <b>Height:</b> ' + messageData.height + 
                            ' <b>Width:</b> ' + messageData.width +
                            ' <b>Event type:</b> ' + messageData.type);
    }
});

Если вы установите enablePublicMethods, он предоставит вам доступ в iframe, чтобы вручную установить размер iFrame и даже удалить iframe со страницы хоста.

1 голос
/ 02 августа 2013

Используя код Питера и некоторые идеи из здесь , вы можете отделить совместимость от исполняемого кода и добавить некоторую межсайтовую проверку. 

<script type="text/javascript">
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
    if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return;
    document.getElementById('iframe_id_goes_here').style.height = e.data + 'px';
  }, false);
</script>

Кроме того, для полнотыВы можете использовать следующий код в iframe всякий раз, когда вы хотите запустить изменение размера. 

parent.postMessage(document.body.offsetHeight, '*');
1 голос
/ 10 сентября 2012

Вы можете использовать реализацию Бена Алмана.Вот пример междоменной связи, включая пример изменения размера iframe.

http://benalman.com/code/projects/jquery-postmessage/examples/iframe/

Согласно документации, он работает в Internet Explorer 6-8, Firefox 3, Safari3-4, Chrome, Opera 9.

...