元素位置相关
DOM.getBoundingClientRect()
这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
let box = document.getElementById('box'); // 获取元素
box.getBoundingClientRect().top // 元素上边距离页面上边的距离
box.getBoundingClientRect().right // 元素右边距离页面左边的距离
box.getBoundingClientRect().bottom // 元素下边距离页面上边的距离
box.getBoundingClientRect().left // 元素左边距离页面左边的距离
offsetTop和 offsetLeft
offsetLeft 和 offsetTop 返回的是相对于 offsetParent 元素的距离,而 offsetParent 指的是一个元素最近的父级定位元素,如果没有定位元素就是文档根节点。
iframe之间通信
postMessage方法
// 父页面
document.getElementsByClassName('iframe-index')[index].contentWindow.postMessage(
{
zoom: 100,
message: '父传子',
code: 3
},'*')
window.addEventListener('message', event => {
console.log('父接受子数据', event.data)
})
// 子页面
window.addEventListener('message', event => {
console.log('子接受父数据', event.data)
window.parent.postMessage({
message: '子传'
}, '*')
})