Вложенные iFrames, родительский размер не всплывает

Question

У меня есть следующая структура:

0. Parent page
    1. iFrame rendered through ad delivery network
        2. iFrame displaying the advertisement

Объявление настроено на изменение размера родительского iFrame с помощью метода parentIFrame.size(), когда пользователь взаимодействует с рекламой. У меня есть эта часть настройки и работает должным образом - я вижу изменения атрибутов встроенного стиля в iframe уровня 2.

Теперь, глядя на демонстрацию, я вижу, что возможно, чтобы вложенные iFrames работали вместе, и размер подходящим образом проходил через вложенные уровни. Я вижу, что iFrame среднего уровня должен быть настроен с файлами contentWindow и iFrameResize.

Учитывая, что iframe моего уровня 2 работает и изменяет размеры должным образом, я предполагаю, что связь между уровнем 1 и уровнем 2 работает должным образом, и моя проблема лежит где-то между уровнем 0 и уровнем 1. Я создал упрощенный тестовый пример и намеренно Регистрация iFrameResize отключена на уровне 2.

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

[iFrameSizer][Host page] IFrame scrolling disabled for sas_i30430
[iFrameSizer][Host page][init] Sending msg to iframe (sas_i30430:8:false:true:32:true:true:null:offset:null:null:0)
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (sas_i30430:8:false:true:32:true:true:null:offset:null:null:0)
[iFrameSizer][sas_i30430] HTML & body height set to "auto"
[iFrameSizer][sas_i30430] Enable public methods
[iFrameSizer][sas_i30430] Enable MutationObserver
[iFrameSizer][sas_i30430] Trigger event lock on
[iFrameSizer][sas_i30430] Sending message to host page (sas_i30430:250:300:init)
[iFrameSizer][Host page] Received: [iFrameSizer]sas_i30430:250:300:init
[iFrameSizer][Host page] Checking height is in range 0-Infinity
[iFrameSizer][Host page] Checking width is in range 0-Infinity
[iFrameSizer][Host page] Requesting animation frame
level 2. registering handler -- resizing to 250, 300
[iFrameSizer][Host page] IFrame (sas_i30430) height set to 250px
[iFrameSizer][sas_i30430] Trigger event: mutationObserver: [object HTMLIFrameElement] attributes
[iFrameSizer][sas_i30430] No change in size detected
[iFrameSizer][sas_i30430] Trigger event lock off
[iFrameSizer][sas_i30430] --

Затем, когда вы нажимаете на объявление, появляется следующее:

level 2. expand action -- resizing to 250, 482
[iFrameSizer][sas_i30430] Trigger event: mutationObserver: [object HTMLIFrameElement] attributes
[iFrameSizer][sas_i30430] No change in size detected

Вы можете видеть, что я регистрирую события со 2-го уровня, чтобы помочь сегментировать журналы. Последняя часть, где iFrame 2-го уровня изменен, но затем iFrame 1-го уровня не наблюдает никаких изменений в размере, - это то, где у меня разрыв.

Уровень 0 имеет следующее:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cachicha.tv/utils/ads/rich-media/assets/js/iframeResizer.min.js"></script>
<script>
    jQuery(function($) {
        $('.adunit').find('iframe').iFrameResize({
            log: true,
            checkOrigin: false,
            autoResize: true,
            enablePublicMethods: true,
        });
    });
</script>

Уровень 1 имеет следующее (это странно, я знаю, но необходимо для рекламной сети... и эта часть работает. Я предоставляю ее для полноты):

<script type="text/javascript">
    var scripts = [
        "http://cachicha.tv/utils/ads/rich-media/assets/js/iframeResizer.min.js",
        "http://cachicha.tv/utils/ads/rich-media/assets/js/iframeResizer.contentWindow.min.js"
    ];

    var jQueryScriptLoaded = function() {
        // load the other scripts after jquery
        for (var i = scripts.length - 1; i >= 0; i--) {
            var element = document.createElement("script");
            element.onload = function() {
                scriptsLoaded();
            };
            element.src = scripts[i];
            document.getElementsByTagName('head')[0].appendChild(element);
        };
    };

    var scriptsLoaded = function() {
        // fire jquery onces all scripts are loaded in the right order
        jQuery(function($) {
            $('iframe').prop('width', '').prop('height', "100%");

            $('iframe').iFrameResize({
                // log                     : true,                  // Enable console logging
                enablePublicMethods     : true,                  // Enable methods within iFrame hosted page
                sizeHeight              : true,
                sizeWidth               : true,
                checkOrigin             : false,
                autoResize              : false,
            });
        });
    }

    // load jquery first.
    var jqueryScript = document.createElement('script');
    jqueryScript.onload = function() {
        jQueryScriptLoaded();
    };
    jqueryScript.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(jqueryScript);

</script>

Уровень 2 имеет сценарий contentWindow и parentIFrame.size().

Спасибо заранее за любую помощь!

Answer 1

Я думаю, проблема в том, что вы устанавливаете высоту внутреннего iFrame на 100% в вашем jQuery.