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

在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中;但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题:

只保留单个滚动条,那么就要让iframe的高度自适应,而从主页面显然直接取不到iframe的值,因为这是跨域的(前台页面与后台页面不在同一个IP地址或者同一个端口),尝试访问会报错:

Blocked a frame with origin “http://7.35.0.8:8080” from accessing a frame with origin “http://7.35.0.9:8080”.Protocols, domains, and ports must match.

解决方案如下:

//主页面 向 iframe传递事件

//主页面

var frame = document.getElementById('iframeId');
frame.contentWindow.postMessage(object,'*');

//iframe页面
iframe: window.addEventListener('message',function(event){
    
    
    //此处执行事件
})
//iframe向主页面传递事件

//iframe页面
window.parent.postMessage(object,'*');

//主页面
window.addEventListener('message',,function(event){
    
    
         //此处执行事件
})

猜你喜欢

转载自blog.csdn.net/qq_38942978/article/details/126159159