Uncaught DOMException: Blocked a frame with origin “” from accessing a cross-origin frame.
上面的信息一看,就是跨域了
解决,把domain 统一一下,涉及到的项目里,把domain都设置成一样的
如果用的vue项目,那就在main.js中或者App.vue里面,写上
if (!location.origin.includes('localhost')) {document.domain = ''}
注意这里是主域名保持一致,就行。就是一级域名,比如:
我们项目里遇到的问题就是,iframe加载了另一个域名下的项目
我们的项目域名是这样的:
主项目:
iframe项目-1:
iframe项目-2:
iframe项目-3:
从上面可以知道,我们项目的主域名是一样的,都是
所以在我们的项目入口文件设置 document.domain = ‘’
另外记录一下,托拽的问题吧,留着以后自己用
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.hashvar 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
多个iframe嵌套 或者加载在一个主体项目 或者页面里。从iframe拖拽 添加数据到主体项目或者页面上 跨域问题解决