Menu
Is there a way to determine from inside of a cross-domain iframe if the iframe is in view or not? I was trying to achieve this using Intersection Observer API. But it seems to work only for same-domain iframe and not cross-domain. I checked the Intersection Observer API documentation(both on MDN and W3C), but couldn't find anything related to this. I hope I'm not missing anything here.
Here is the example code
Main Html Page
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<div style="margin:700px auto;text-align:center;">
<iframe marginwidth="0" marginheight="0" frameborder="0" height="250px" width="300px"
id="aax_if_aax_sidebar-btf-1" allowtransparency="true" src="http://127.0.0.1:8080/iframe.html"></iframe>
</div>
</body>
</html>
Embedded Iframe Page
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
<div id="abc" style="background-color: black;width:100%;height: 100%;"></div>
<script>
setupIntersectionObserver = function (adContainer) {
console.log('setting up observer', observer);
var observer = new IntersectionObserver(
function (entries) {
console.log('observer triggered', entries);
},
{
root: null,
rootMargin: '10px',
threshold: 0
}
);
observer.observe(adContainer);
};
setupIntersectionObserver(document.getElementById('abc'))
</script>
</body>
</html>
If I run the main page locally, then the intersection observer inside the iframe works only if the page is browsed using 127.0.0.1:8080, and not for localhost:8080 (cross-domain)
Does Intersection Observer works from inside of a cross-domain iframe, with respect to the viewport?
704
I do not believe that there are any restrictions on cross-origin IntersectionObservers, however in my understanding they should have no explicit root set. In your case that would mean removing root: null from IntersectionObserver's configuration in the sub-frame.
It is important to note however, that your specified rootMargin value will not take effect in the cross-origin case as per the W3C it is only applied "for targets which belong to the same unit of related similar-origin browsing contexts".
You might also need to explicitly switch your JavaScript context in dev tools to the sub-frame to see the log message. Example in Chrome Dev Tools.
This use case is supported by WebKit & Blink for sure, because they have automated testing specifically for cross-origin IntersectionObserver: main frame page, sub-frame page
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
