交叉点观察器polyfill无法正常工作Safari [英] intersection observer polyfill not working Safari
问题描述
我需要检测从另一个域加载的iframe是否在视口中.
这在Chromem，Firefox和IE中称为Intersection Observer的本机中正常运行.但是，这在Safari中不起作用.
已为此创建了一个polyfill: Github链接，并且应该也可以在Safari上工作.
我使用以下代码对其进行了测试:
站点A:
<html>
<head>
</head>
<body>
A lot of text here so the iframe is not inview.
A lot of text here so the iframe is not inview.
<br>
<br>
.
.
.
.
.
.
.
<br>
A lot of text here so the iframe is not inview.
<iframe src="//siteB.com/test.html" frameborder="0" border="0" scroll="no" scrolling="no" width="300" height="250" style="border: 0px; overflow: hidden !important;"></iframe>
</body>
</html>
站点B:
<html>
<head>
<script src="intersection-observer.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
//do work
var io = new IntersectionObserver(
entries => {
console.log(entries);
if (entries["0"].isIntersecting) {
alert("inview");
}
},
{
/* Using default options. Details below */
}
);
// Start observing an element
var img1 = document.getElementById("img1");
console.log(img1);
io.observe(img1);
});
</script>
</head>
<body>
<img id="img1" src="motor.gif" style="position:absolute; top:0px; left:0px"/>
</body>
</html>
但是，我已经在Iphone 6上对其进行了测试，但是它会立即发出警报，并且在单击警报后，它在上下滚动时不再显示.
它们包含了所有25个测试的回程通行证.
有人对此有解决方案吗?
我在github上看到一个问题，其中概述了由于怪癖模式而使safari高度不正确的问题:Github link and should be working on Safari as well.
I tested it using this code:
Site A:
<html>
<head>
</head>
<body>
A lot of text here so the iframe is not inview.
A lot of text here so the iframe is not inview.
<br>
<br>
.
.
.
.
.
.
.
<br>
A lot of text here so the iframe is not inview.
<iframe src="//siteB.com/test.html" frameborder="0" border="0" scroll="no" scrolling="no" width="300" height="250" style="border: 0px; overflow: hidden !important;"></iframe>
</body>
</html>
Site B:
<html>
<head>
<script src="intersection-observer.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
//do work
var io = new IntersectionObserver(
entries => {
console.log(entries);
if (entries["0"].isIntersecting) {
alert("inview");
}
},
{
/* Using default options. Details below */
}
);
// Start observing an element
var img1 = document.getElementById("img1");
console.log(img1);
io.observe(img1);
});
</script>
</head>
<body>
<img id="img1" src="motor.gif" style="position:absolute; top:0px; left:0px"/>
</body>
</html>
However I've tested this on an Iphone 6 however it immediatly does the alert and after clicking the alert away it doesn't show up anymore when scrolling up and down.
The intersection-observer-test.html page they included return passes for all 25 tests.
Anyone have a solution to this?
I saw a issue on github where it outlined safari getting the incorrect height because of quirks mode : https://github.com/w3c/IntersectionObserver/issues/282 . Maybe add
<!DOCTYPE html>
<html>
can fix it.
这篇关于交叉点观察器polyfill无法正常工作Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
