网站推广目标计划,网站设计制作多少钱,网站做广告投放 要求做效果评估,网站的建设方法包括什么问题由于业务需求#xff0c;最近研究localStorage、indexedDB等如何跨域进行CRUD管理#xff0c;经过一番研究#xff0c;封装了如下代码并做个笔记 环境
vue: ^3.3.4
实战
发送端(即触发站点)
在App.vue中引入CrossDomainStorage组件(后面有实现过程)
script setup最近研究localStorage、indexedDB等如何跨域进行CRUD管理经过一番研究封装了如下代码并做个笔记 环境
vue: ^3.3.4
实战
发送端(即触发站点)
在App.vue中引入CrossDomainStorage组件(后面有实现过程)
script setup
import { ref } from vue
import CrossDomainStorage from /components/CrossDomainStorage/index.vue;
const crossDomainStorageRef ref(null)function sendTest() {if (crossDomainStorageRef.value){crossDomainStorageRef.value.sendMessage(getItem, {key:APP_THEME_SCREEN})}
}
/scripttemplatedivbutton clicksendTest测试/buttonCrossDomainStorage :srchttp://xxxx.xxx/ refcrossDomainStorageRef//div
/template接收端(即目标站点)
为了方便直接在App.vue中实践
script setup
import ParentMsgListener from /utils/parentMsgListenerconst parentMsgListener new ParentMsgListener()
parentMsgListener.addPermissionModule({ // 设置权限key对应处理方法localStorage: {setItem: localStorage.setItem,getItem: localStorage.getItem,},asyncTest: {text: async () await asyncValue,text2: () testValue,}
});
parentMsgListener.addPermission([ // 设置可操作的对象列表localStorage
])
parentMsgListener.start();
/script实现代码
CrossDomainStorage组件
script setup langts
import {ref, reactive, onMounted} from vue;defineOptions({name: CrossDomainStorage
});const iframeRef ref();
const emit defineEmits([onLoad,response])
const props defineProps({src: {type: String, default:(), required:true}
});
const status ref(false)
const iframeStyles reactive({position: fixed,top:0,left:0,width: 0,height: 0,zIndex:-1
});window.addEventListener(message, function (e) {if (e.data e.data.request){console.log([发送端]从iframe获取数据, e.data)emit(response, e.data||null)}
});function sendMessage(method: string, param: object, key: string) {if (status.valuefalse)return;key key?key:localStorageif (iframeRef?.value){const iframeNode iframeRef.value.contentWindow;let request {key, method, param}console.log([发送端]向iframe发送request:, request)setTimeout(function () {iframeNode.postMessage(request, *)}, 500)}
}defineExpose({sendMessage: (method: string, param: object, key: string)sendMessage(method, param, key)
})onMounted((){if (!!iframeRef.value !!iframeRef.value.contentWindow){iframeRef.value.onload function () {status.value true;emit(onLoad, true)}}
})
/scripttemplateiframe refiframeRef :srcprops.src:styleiframeStylesframeborder0scrollingno/
/template
parentMsgListener.ts封装消息管理类
// src/utils/parentMsgListener.ts
const messageLog function (log, ...arg){arg.unshift([接收端], log)console.log.apply(console, arg)
}interface permissionOptions {key: string[],module: object
}/*** 监听响应拦截** param {object} e 接收数据* param {array} permission 权限列表* param {function} response 接收回调** return {void}*/
const listenerResponse async function (e, permission: permissionOptions, response) {if (e.data !!e.data.key permission.key.includes(e.data.key)){let result undefined;let lib permission.module[e.data.key] || undefined;let method e.data?.method || ;let param e.data?.param||{};if (!!lib){let _param [];for (let key in param){_param.push(${param[key]})}try { // 调用非js内置方法且兼容异步调用处理方法result await ((lib[method]).apply(lib[method], Object.values(param)));}catch (error) { // 调用js内置方法result eval(${e.data.key}.${method}(${_param.join(,)}));}}messageLog(response:, result)response({request: e.data,response: result}, *)}
}class ParentMsgListener {/*** 消息调用权限对应处理* var {object}*/private permissionMap {};/*** 消息允许调用权限* var {string[]}*/private permission []constructor(permission) {if (permission permission.length0){this.addPermission(permission)}}/*** 添加授权权限key对应处理模块** param {string|object} name 权限key* param {function} fn 权限key处理方法** return this*/addPermissionModule(name:string|object, fn){if (!fn typeof name object){ // 批量导入for (let moduleKey in name){this.addPermissionModule.call(this, moduleKey, name[moduleKey]);}}else if(typeof name string !!fn) { // 逐个导入this.permissionMap[name] fn;}return this;}/*** 添加授权权限** param {string|string[]} permissionKey 权限key** return this*/addPermission(permissionKey: string|string[]){if (permissionKey instanceof Array){let that this;permissionKey.forEach((key){that.permission.push(key)})}else{this.permission.push(permissionKey)}return this;}/*** 发送消息** param {object} message 发送内容* param {string} targetOrigin 默认*** return {void}*/sendMessage(message:any, targetOrigin:string *){messageLog(发送消息, message)window.parent.postMessage(message, targetOrigin)}/*** 启动监听*/start(){window.addEventListener(message,(e)listenerResponse(e, {key: this.permission,module: this.permissionMap}, this.sendMessage))}
}export default ParentMsgListener
