hugh 的个人博客

  let targetNode = document.getElementById('message_container')
      if (!targetNode) {
        const div = document.createElement('div')
        div.id = 'message_container'

        document.body.appendChild(div)
        targetNode = div
      }

1
2
3
4
5
6
7
8
9

对该目标元素设置监听

// 只需要观察属性和子级变化即可
      const config = { attributes: true, childList: true }

      // 一旦子级变化，可以确定内容被附加进去， 触发top变更
      const callback = function(mutations) {
        for (const mutation of mutations) {
          console.log(mutation, mutation.target)
          if (
            mutation.type == 'childList' &&
            mutation.target.id === 'message_container'
          ) {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
              const topScroll = getWindowScrollTop(window.top)
              mutation.target.style.top = 16 + topScroll + 'px'
            }
          }
        }
      }

      // 创建一个观察器实例
      const observer = new MutationObserver(callback)

      if (targetNode) {
        // 启用观察
        observer.observe(targetNode, config)
      }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

其中 getWindowScrollTop方法，需要可以获取到父级的变化（域名一致）域名不一致时，可以通过postMessage通知变更