postMessage All In One

postMessage All In One

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').

      // 防抖
      // const debounce = (func, times = 1000) => {
      //     let timer = null;
      //     return () => {
      //         if (timer){
      //             clearTimeout(timer);
      //         }
      //         timer = setTimeout(fn, wait);
      //     };
      // };
      // function debounce (func, times = 1000) {
      //     let timer = null;
      //     return function () {
      //         if (timer){
      //             clearTimeout(timer);
      //         }
      //         timer = setTimeout(fn, wait);
      //     };
      // };

      const sendScrollMessage = () => {
        const app = document.querySelector(`[id="app"]`);
        const height = Math.abs(app.scrollTop);
        console.log('app, height', app, app.scrollTop, height);
        parent.postMessage({
          type: "iframeScrollEvent",
          other: "other data to pass",
          height: height,
        }, "http://localhost:52331/test/heatmap/index.html");
      };
      setTimeout(() => {
        function debounce (func, times = 1000) {
            let timer = null;
            return function () {
                if (timer){
                    clearTimeout(timer);
                }
                timer = setTimeout(func, times);
            };
        };
        const section = document.querySelector('section');
        console.log('section =', section);
        section.addEventListener('scroll', (event) => {
            // console.log('iframe scroll', event);
            debounce(sendScrollMessage, 500)();
        }, false);
      }, 1000);

demo

https://iframe.xgqfrms.xyz/post-message/index.html

refs

https://cdn.xgqfrms.xyz/iframe/post-message/child.html
https://cdn.xgqfrms.xyz/iframe/post-message/index.html

https://www.cnblogs.com/xgqfrms/p/10315391.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---