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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15751002.html
未经授权禁止转载,违者必究!