0
我有以下結構：嵌套iframe，父調整大小不能上升
0. Parent page
1. iFrame rendered through ad delivery network
2. iFrame displaying the advertisement
廣告是設置通過parentIFrame.size（）方法來調整父的iFrame當用戶與所述廣告交互。我有這部分設置並正常工作 - 我可以看到內聯樣式屬性在2級iframe中更改。
現在，看看demo我可以看到嵌套的iFrames可以一起工作，並且可以通過嵌套層級適當地調整大小。我發現中級別的iFrame必須安裝contentWindow和iFrameResize文件。
鑑於我的2級的iframe不工作和調整得當，我假設Level 1和Level 2之間的通信是否正常工作，我的問題是介於0級和1級之間我已成立了一個simplified test case和刻意已經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的最後一部分被調整大小，但是第一級iFrame沒有觀察到大小的變化，這是我斷開連接的地方。
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（）調用。
在此先感謝您的幫助！