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, 禁止轉載 🈲️，侵權必究⚠️！

---