admin管理员组

文章数量:1315792

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?

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?

  • javascript
  • html
  • google-chrome
  • intersection-observer
Share Improve this question asked Mar 17, 2020 at 17:39 panghal0panghal0 5514 silver badges10 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 10 +25

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

本文标签：

版权声明：本文标题：javascript - Does Intersection Observer works from inside of a cross-domain iframe, with respect to the viewport? - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741990183a2408957.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。