proxy page & iframe cors All In One

proxy page & iframe cors All In One

使用代理页面解决 iframe 跨域问题

demo

https://iframe.xgqfrms.xyz/window-proxy/index.html

postMessage & iframe.contentWindow.postMessage

OK ✅

http://localhost:52330/dap-web/test/mask-scroll.html

https://iframe.xgqfrms.xyz/post-message/mask-scroll.html

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

HTTPS bug ?

https://iframe.xgqfrms.xyz/post-message/mask-scroll.html

// 跨域 iframe 通信
const iframe = document.querySelector(`[id="iframe"]`);
console.log('parent page get iframe', iframe);
// iframe加载完毕后再发送消息，否则子页面接收不到message
// onload ❓❌
iframe.onload = function() {
    console.log('iframe onload');
    /*let count = 0;
    let timer = setInterval(() => {
        count++;
        if(count > 100) {
            clearInterval(timer);
        }
        console.log('\nsend message to iframe');
        iframe.contentWindow.postMessage({
            type: "iframeScrollEvent",
            other: "other data to pass",
            height: 100,
        }, "*");
    }, 1000);*/
    // console.log('timer', timer);
}
// solution ✅
setTimeout(() => {
    let count = 0;
    let timer = setInterval(() => {
        count++;
        if(count > 100) {
            clearInterval(timer);
        }
        console.log('\nsend message to iframe');
        iframe.contentWindow.postMessage({
            type: "iframeScrollEvent",
            other: "other data to pass",
            height: 100,
        }, "*");
    }, 1000);
}, 3000);

refs

https://crazyfzw.github.io/2018/06/13/cross-domain-solution/

---

---

©xgqfrms 2012-2020

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

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

---