parent.postMessage bug All In One

parent.postMessage not working

const sendScrollMessage = () => {
    const app = document.querySelector('#app-content');
    const clientHeight = app.clientHeight;
    console.log(clientHeight, window.parent);
    console.log('2',clientHeight, parent);
    // 测试环境
    parent.postMessage({
        type: 'iframeHeight',
        height: clientHeight,
    }, 'https://app.xgqfrms.xyz/tools/landing-page');
};

parent ok ?

https://iframe.xgqfrms.xyz/post-message/heat-map.html

const sendScrollMessage = () => {
    // const app = document.querySelector('#app');
    // const app = document.querySelector('#root');
    const app = document.querySelector('body');
    // const height = Math.abs(app.scrollTop);
    const rect = app.getBoundingClientRect();
    const clientHeight = app.clientHeight;
    const scrollHeight = app.scrollHeight;
    if(!parent) {
      return;
    }
    console.log('parent window', parent);
    parent.postMessage({
        type: 'iframeHeight',
        clientHeight: clientHeight,
        scrollHeight: scrollHeight,
        rect: rect,
    }, 'https://iframe.xgqfrms.xyz/post-message/heat-map.html');
};

drawer 抽屉层 bug ??? ?

window.parent !== parent (如果存在 drawer ?)

solution ?

window.parent.postMessage / window.postMessage

const sendScrollMessage = () => {
    const app = document.querySelector('body');
    const rect = app.getBoundingClientRect();
    const clientHeight = app.clientHeight;
    const scrollHeight = app.scrollHeight;
    window.parent.postMessage({
        type: 'iframeHeight',
        clientHeight: clientHeight,
        scrollHeight: scrollHeight,
        rect: rect,
    }, 'https://iframe.xgqfrms.xyz/post-message/heat-map.html');
};

height: 100%;

    

        

            
        
    


    
        开启热力图
        
            
        
    

demo ??

const sendIframeDynamicHeightMessage = () => {
    const app = document.querySelector('#appt');
    const clientHeight = app.clientHeight;
    console.log('\nclientHeight =', clientHeight);
    console.log('window =', window);
    console.log('window.parent =', window.parent);
    console.log('window.location =', window.location);
    const host = window.location.host;
    // const protocol = window.location.protocol;
    // const url = `${protocol}//${host}/tools/landing-page`;
    const url = `${window.location.origin}/tools/landing-page`;
    let env = '';
    switch (host) {
        case 'dev.xgqfrms.xyz':
            env = '测试环境';
            break;
        case 'release.xgqfrms.xyz':
            env = '灰度环境';
            break;
        case 'dap.xgqfrms.xyz':
            env = '生产环境';
            break;
        default:
            break;
    }
    window.parent.postMessage({
        type: 'iframeHeight',
        height: clientHeight,
        env: env,
    }, url);
};

window.location.ancestorOrigins

const sendScrollMessage = () => {
    const app = document.querySelector('#app-content');
    const clientHeight = app.clientHeight;
    console.log('\nclientHeight =', clientHeight);
    console.log('window =', window);
    console.log('window.parent =', window.parent);
    console.log('window.location =', window.location);
    const host = window.location.host;
    window.parent.postMessage({
        type: 'iframeHeight',
        height: clientHeight,
        env: '测试环境',
    }, 'http://dev.xgqfrms.xyz/tools/landing-page');
};


window.onload = function () {
    console.log('iframe 页面加载完成');
    sendScrollMessage();
}
   

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！