iFrame中的IntersectionObserver Polyfill(Safari,IE11)

时间:2018-12-20 16:51:24

标签: javascript safari internet-explorer-11 intersection-observer

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

IE或Safari不支持IntersectionObserver,因此我不得不使用polyfill:https://github.com/w3c/IntersectionObserver/tree/master/polyfill

与大多数情况一样,最好将其描述为图像:Overview of the Issue

注意上面的“观察到的: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我缺少什么吗?

0 个答案:

没有答案