Uncaught DOMException: Blocked a frame with origin “http://abc.aaaa.com” from accessing a cross-origin frame.
上面的信息一看，就是跨域了
解决，把domain 统一一下,涉及到的项目里，把domain都设置成一样的
如果用的vue项目，那就在main.js中或者App.vue里面，写上
if (!location
.origin
.includes('localhost')) {
document
.domain
= 'xxx.com'
}
注意这里是主域名保持一致，就行。就是一级域名，比如：baidu.com
我们项目里遇到的问题就是，iframe加载了另一个域名下的项目
我们的项目域名是这样的： 主项目：abc.aaaa.com iframe项目-1：def.aaaa.com iframe项目-2：hig.aaaa.com iframe项目-3：opq.aaaa.com
从上面可以知道，我们项目的主域名是一样的，都是 aaaa.com
所以在我们的项目入口文件设置 document.domain = ‘aaaa.com’
另外记录一下，托拽的问题吧，留着以后自己用
dragstart（e）{
const dragData = {
data: [
{
contentType: 'aabbcc',
content: '哈哈'
}
]
}
e.dataTransfer.setData('text/plain', JSON.stringify(dragData))
}
dragstart 原生事件（用e代表）上，有dataTransfer属性，dataTransfer原型上有setData事件 e.dataTransfer.setData(‘text/plain’, JSON.stringify(dragData))
setDragImage 这个方法，可以设置托拽时的图片。具体用法，还是要百度的
e.dataTransfer.setDragImage(window.$dragThumbnail, 13, 17)
另一种数据传递，可以不用考虑跨域。postMessage
export function getUrlParam (name
) {
var reg
= new RegExp('(^|&)' + name
+ '=([^&]*)(&|$)')
try {
var r
= window
.location
.search
.substr(1).match(reg
)
if (!r
) {
var hash
= window
.location
.hash
var query
= hash
.split('?')[1]
r
= query
.match(reg
)
}
if (r
!= null) {
return decodeURIComponent(r
[2])
}
} catch (error) {
}
return null
}
export function postMessage (handleName
, data
) {
var message
= JSON.stringify({
action
: handleName
,
data
: data
,
sender
: window
.name
|| getUrlParam('IframeName') || 'aibeike-resources'
})
console
.log(message
)
return window
.parent
&& window
.parent
.postMessage(message
, '*')
}
export default {
postMessage
,
getUrlParam
}
把上面的单独，写成一个js文件，在main.js引入，可以注册为全局的通信方法
import { postMessage
} from './assets/common/utils'
Vue
.prototype
.$postMessage
= postMessage
