javascript - iFrame 中的 IntersectionObserver Polyfill (Safari, IE11)

Question

我有一个创建 iFrame 的应用程序，在该 iFrame 中我需要观察元素是否可见。

IE 或 Safari 不支持 IntersectionObserver，所以我不得不使用 polyfill：https ://github.com/w3c/IntersectionObserver/tree/master/polyfill

像大多数事情一样，最好将其描述为图像：

注意上面的“观察到：0”，这是intersectionRatio. 在具有本机实现的浏览器中，这会报告可见元素的比例。在图像的当前状态下它会报告1。

这是我对可观察对象及其选项所做的小片段：

var doc = document.getElementById('inner-root').contentDocument
var bod = doc.getElementsByTagName('body')[0]

// Attaching the observable p tag:
var obs = document.createElement('p')
obs.id = 'observe-me'
obs.innerHTML = 'Observe this!'
innerBox.appendChild(obs)

// Setup the observer
// Can root any: documentElement, body, or innerBox (all work in Chrome)
var options = {
  root: doc.documentElement,
  //root: innerBox,
  // root: bod,
  rootMargin: '0px',
  threshold: 1.0
}
var callback = function(entries, observer) {
  entries.forEach(function(entry) {
    result.innerHTML = 'Observed: ' + entry.intersectionRatio
  })
}
var observer = new IntersectionObserver(callback, options)
var reSelectedObs = doc.getElementById('observe-me')
reSelectedObs.style.background = 'orange'
observer.observe(reSelectedObs)
})()

这是完整的来源：https ://github.com/Kikketer/ieframe-observe/blob/w3c-polyfill/index.html

你可以在这里演示：http://htmlpreview.github.io/?https: //raw.githubusercontent.com/Kikketer/ieframe-observe/w3c-polyfill/index.html

我担心我只需要为我拥有的元素编写某种自定义观察者，但我感觉我写的东西看起来有点像 polyfill。

有没有人遇到过这样的情况？polyfill 有什么我缺少的吗？

标签： javascriptsafariinternet-explorer-11intersection-observer