在调整父窗口大小时，iFrame中的Materialise Carousel不会刷新/重绘

Question

我在iFrame（跨域）中使用Materialize轮播。

iFrame是固定宽度，除非它被调整为低于移动宽度，之后它的宽度为100％。

如果页面和iFrame最初在小宽度屏幕（例如iPhone 5）上加载 - 然后调整为桌面屏幕 - 例如，轮播是bugged out man。

幻灯片彼此重叠，并且不会重绘 - 或者重新计算幻灯片的偏移量。

Answer 1

要解决此问题，我执行了以下操作。

父页面JavaScript

var iFrame = document.createElement('iframe');
// code excluded - setting up iFrame, setting src etc...

window.addEventListener('resize', function(){
    iFrame.contentWindow.postMessage({ message: 'parent-resized' }, iFrameDomain);
}, true);

iFrame JavaScript

if(window.addEventListener){
    window.addEventListener('message', receiveMessage, false);        
} else if (window.attachEvent){
    window.attachEvent('onmessage', receiveMessage, false);
}

function receiveMessage(event){
   if(event.data.message === 'parent-resized'){
       $('.carousel').carousel().trigger('resize');
    }
}

就是这样。旋转木马会做它并修复变换值。