export const initFn = () => {
|
var iframeWin = document.getElementById("iframe1")
|
{
|
iframeWin.onload = function () {
|
iframeWin.contentWindow.postMessage({
|
action: 'sendTitle', // 告诉子页面本页面的标题（action自行指定，但需要与子页面中监听的action保持一致
|
msg: '将标题发给子页面',
|
info: document.title
|
}, '\*')
|
iframeWin.contentWindow.postMessage({
|
action: 'updateInitParam', // 告诉子页面一些初始值，包括浏览器视窗高度与宽度、iframe偏离文档的位置、iframe相对视窗的位置
|
msg: '更新子页面一些初始值',
|
showSize: { // 浏览器视窗高度与宽度
|
width: $(window).width(),
|
height: $(window).height()
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
}
|
}, '\*') // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
}
|
|
// 步骤3：监听嵌入子页面的事件
|
window.addEventListener('message', function (e) {
|
console.log(e.data.msg)
|
if (e && e.data) {
|
switch (e.data.action) {
|
case 'updateTitle': // 本页面收到子页面通知更新标题通知，更新本页面标题
|
document.title = e.data.info
|
break
|
case 'updatePos':
|
var scrollLeftValue = document.documentElement.scrollLeft
|
var scrollTopValue = document.documentElement.scrollTop
|
iframeWin.contentWindow.postMessage({
|
action: 'updatePos',
|
msg: '更新Pos',
|
scrollValue: { // 滚动条滚动的偏移量
|
left: -1 * scrollLeftValue,
|
top: -1 * scrollTopValue,
|
}
|
}, '\*') // '\*'表示跨域参数，请结合自身业务合理设置
|
break
|
default:
|
break
|
}
|
}
|
})
|
|
// 步骤4：兼听本页面的resize事件，并将一些状态值发送给嵌入的子页面
|
var resizeTimer = null
|
var resizeDate
|
$(window).resize(function () {
|
resizeDate = new Date()
|
if (resizeTimer === null) {
|
resizeTimer = setTimeout(checkResizeEndTimer, 100)
|
}
|
})
|
|
function checkResizeEndTimer() {
|
if (new Date() - resizeDate > 100) { // resize结束后再发消息，避免残影问题
|
clearTimeout(resizeTimer)
|
resizeTimer = null
|
postResizeEvent()
|
} else {
|
setTimeout(checkResizeEndTimer, 100)
|
}
|
}
|
|
function postResizeEvent() {
|
iframeWin.contentWindow.postMessage({
|
action: 'resize',
|
msg: 'resize事件',
|
showSize: { // 告诉嵌入的子页面视窗高度与宽度
|
width: $(window).width(),
|
height: $(window).height()
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
}
|
}, '\*') // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
|
// 步骤5：兼听本页面的scroll事件，并将一些状态值发送给嵌入的子页面
|
// 为性能考虑，可以在定时器中处理
|
var scrollTimer = null
|
var scrollDate
|
$(window).scroll(function (event) {
|
postScrollEvent()
|
scrollDate = new Date()
|
if (scrollTimer === null) {
|
scrollTimer = setTimeout(checkScrollEndTimer, 100)
|
}
|
})
|
|
function checkScrollEndTimer() {
|
if (new Date() - scrollDate > 100) { // resize结束后再发消息，避免残影问题
|
clearTimeout(scrollTimer)
|
scrollTimer = null
|
} else {
|
postScrollEvent()
|
setTimeout(checkScrollEndTimer, 100)
|
}
|
}
|
|
function postScrollEvent() {
|
// 计算滚动条偏移量
|
var scrollLeftValue = document.documentElement.scrollLeft
|
var scrollTopValue = document.documentElement.scrollTop
|
iframeWin.contentWindow.postMessage({
|
action: 'scroll',
|
msg: 'scroll事件',
|
scrollValue: { // 滚动条滚动的偏移量
|
left: -1 * scrollLeftValue,
|
top: -1 * scrollTopValue,
|
},
|
iframeClientPos: { // iframe相对视窗的位置
|
left: iframeWin.getBoundingClientRect().left,
|
right: iframeWin.getBoundingClientRect().right,
|
top: iframeWin.getBoundingClientRect().top,
|
bottom: iframeWin.getBoundingClientRect().bottom
|
},
|
showSize: { // 告诉嵌入的子页面视窗高度与宽度
|
width: $(window).width(), // 视窗宽度
|
height: $(window).height() // 视窗高度
|
},
|
iframeOffset: { // iframe偏离文档的位置
|
left: iframeWin.offsetLeft,
|
top: iframeWin.offsetTop
|
}
|
}, '\*') // '\*'表示跨域参数，请结合自身业务合理设置
|
}
|
|
}
|
