Uncaught DOMException: Blocked a frame with origin 跨域问题解决方法

最新推荐文章于 2023-11-10 15:29:53 发布

原创最新推荐文章于 2023-11-10 15:29:53 发布 · 10w+ 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#跨域 #js #Uncaught DOMException #layer

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用postMessage方法解决跨域传值问题的方法，详细展示了如何在layer框架的弹出层与父页面间进行安全有效的数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近写的项目需在弹出层中调用其它系统的页面，并获取选中的内容，但是遇到Uncaught DOMException: Blocked a frame with origin "url" from accessing a cross-origin frame.这个问题。

使用postMessage()方法可以解决跨域传值的问题，这里贴上posetMessage的API

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

废话不多说直接上代码

我是使用的layer这个前台框架，所以可能和使用window.open()这种方式打开的弹出层有点不同。

父页面

layer.open({
    //layer弹出层成功打开后，发送消息给子页面
    success: function (layero, index) {
      var data = $('[id*="id"]').val()
      //因为是公司内网，所以url使用的*
      window[layero.find('iframe')[0]['name']].postMessage(data, '*');
     },
    //点击页面的确认按钮后获取子页面的返回值
     yes: function (index, layero) {                       
        //发送一个'return'，表示子页面需要返回值
        window[layero.find('iframe')[0]['name']].postMessage('return', '*')
        layer.close(index);
    }
});

//监听子页面的postMessage
function receiveMessage(event) {
     console.log(event.data)//取得子页面传回来的值
     $("#id").val(event.data)
 }
 window.addEventListener('message', receiveMessage, false);

这里贴上一段关于Url参数的说明，各位使用的时候要注意一下安全问题

子页面接收父页面发送的值

window.addEventListener('message',function(e){    
    var value = e.data;
    //子页面如果接收到的data的值是'return'，则调用返回方法向父页面发送数据
    if (value != null && value == 'return')
        //返回数据
        returnSelectUser()
    else if (value != null && value.trim().length != 0) {
        //do something      
    }
}, false);

//向父頁面发送數據
function returnSelectUser() {
    var value = $("#id").text();
    console.log(value)
    parent.postMessage(value, "*");    
}