JavaScript – Try & Catch – 捕获Window.postMessage()错误的麻烦。

当使用window.postMessage()时,我在捕捉错误方面遇到了麻烦。

我希望能够捕捉到我所得到的错误——。

“无法将信息发布到 http:/www.that-domain.com. 收件人为原籍 http:/www.this-domain.com

简单的示例代码(应错误)。

 try {
    window.postMessage('1','http://www.differentDomain.com');
 } 
 catch (e) {       
     alert('error');
 }

更详细的流程:我是用jQuery在文档中添加一个跨域iframe,然后发布到它。这不应该出错,因为目标原点应该是匹配的–它们都是由proxyDomain变量设置的。

var $iframeProxy = $('<iframe id="myIFrame" src="' + proxyDomain + '"></iframe>').appendTo('body');

window.storageProxy = $iframeProxy[0].contentWindow;

try {
    window.storageProxy.postMessage(message, proxyDomain);
}
catch (e) {       
    alert('error');
}

解决方案:

没有办法捕捉到这个错误,但通常如果目标原点不同,就会发生错误,这种情况是测试与生产场景。

所以你可以检查什么是父域,并相应地改变目标原点。

function getTargetOrigin()
{
    try {
        var url = (window.location != window.parent.location) ? document.referrer : document.location.href;
        if (url.indexOf('www.myproduction-website.com')!=-1)
            return document.location.protocol + '//www.myproduction-website.com'
        else //set the alternative target
            return document.location.protocol + '//' + url.split('/')[2];
    }
    catch(e) //falback to production
    {
        return document.location.protocol + '//www.myproduction-website.com'
    }
}

并在postMessage函数中使用它。

function postMessage(message){
    window.top.postMessage( message,getTargetOrigin());
}

有了这个解决方案,你可以在多个服务器配置中使用相同的代码,而不需要硬编码targetOrigin url。

如果你在框架内导航,并且你重新检查document.referrer,在这种情况下,它将不包含父域的url,而是前一个框架的url,在这种情况下,考虑使用’*’作为目标原点url,这是唯一的工作解决方案发送消息到其他域。

希望能帮到你

给TA打赏
共{{data.count}}人
人已打赏
未分类

为elasticsearch注册一个基于HDFS的快照仓库时,出现连接拒绝错误。

2022-9-9 6:58:16

未分类

Vue - 如何在v-btn上设置属性,当点击时删除响应?

2022-9-9 6:58:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索