jq如何监听iframe内的body高度

要监听dom 第一个就应该想到MutationObserver

以下是效果图

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>child</title>
        <style>
        body{
            border: solid 10px red;
        }
        </style>
    </head>
    <body>
        <script>
            const body = document.body;
            // 监听
            const observer = new MutationObserver(mutationsList => {
                // 得到当前的高度
                const currentHeight = window.getComputedStyle(body,null).height;
                // 向父窗口发数据
                top.postMessage(currentHeight,"*");
            });

            observer.observe(body, {
                attributes: true,
                childList: true,
                subtree: true,
            });


            // 定时随机变化body高度
            const random = (min, max) =>
                Math.floor(Math.random() * (max - min + 1)) + min;
            setInterval(() => {
                body.setAttribute("style", `height:${random(100, 500)}px`);
            }, 2000);
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>parent</title>
        <style>
            #fm {
                height: 600px;
            }
        </style>
    </head>
    <body>
        <p id="text"></p>
        <iframe id="fm" src="child.html" frameborder="0"></iframe>
        <script>
            const p = document.querySelector("#text");
            // 监听发来的数据
            window.addEventListener("message", function(e) {
                p.innerHTML = `当前child高度为${e.data}`;
            });
        </script>
    </body>
</html>

jq如何监听iframe内的body高度

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？