iframe 弹窗跨域问题解决

一、场景：

网站A(www.wzA.com)，网站B(www.wzB.com)。

在网站A中打开一个iframe,iframe 中嵌套的网页B。现在需要点击网站B的按钮，来调用网站A的一个方法closeDialog。如果不存在跨域问题，可以通过top.closeDialog()或者parent.closeDialog(),就能调用到网站A的方法，但是由于浏览器产生了跨域，就会报错，不能直接调用

二、目标

能够在网站B中调用网站A的方法closeDialog()

三、方法，使用postMessage

原理就不多讲了，因为我也不懂。。。。

1.在页面A中创建监听器：

window.addEventListener('message', function (e) {
        if (e.data === 'closeDialogMsg') {
            closeDialog();
        }
    }, false);

2.在页面B中发送消息

//取消按钮
$('#cancel-btn').on('click', function () {
    let targetOriginUrl = "*";
    window.parent.postMessage('closeDialogMsg',targetOriginUrl);
});

注意targetOriginUrl最好是网站A的地址，如果填网站A的地址不能成功，就直接使用"*"吧

这样就基本完成了！