parent.postMessage bug All In One

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%;

<div class="phone-wrapper">
    <div class="phone-outer">
        <section
            id="parentPage"
            class="heatmap-box"
            :style="`height: ${dynamicHeight}px;`">
            <iframe id="childPage" style="width: 100%; height: 100%; min-height: 600px;" :src="previewUrl" frameborder="0"></iframe>
        </section>
    </div>
</div>
<div class="heatmap-checkbox">
    <el-checkbox v-model="showHeatMap" @change="changeShow" :disabled="!isDragonflyLandingPage">
        开启热力图
        <dap-popover
            placement="top"
            title=""
            width="136"
            trigger="hover"
            content="生成的落地页可查看热力图。">
            <icon-svg
                slot="reference"
                icon-class="question-circle-o"
                class="m-l-5 f12 c-999 icon-hover"
            />
        </dap-popover>
    </el-checkbox>
</div>

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, 禁止转载 🈲️，侵权必究⚠️！

---