每周工作总结知识点(4/13~4/19)

107 阅读1分钟

元素位置相关

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: '子传'
    }, '*')
})