在做一个vue的项目 涉及跨域  然后利用iframe内嵌页 会有很多问题   所以尝试利用object标签去完成内嵌功能

很简单   

我写了一个小例子   跨域的     

a 项目 vue的  端口8080

b项目 express的 端口3000

然后a项目引用object  在data写上b项目的页面的请求


很好 页面出来了


然后我想完成从b页面将数据给a 用于通信 达到后续操作的目的  然后这里就利用postMessage了

我再b项目的页面写以下


上面利用的postMessage

然后再a项目  （vue）  先在created里 开启监听


自动忽略没用的东西哈   这里 如果接受到message  会调用当前vue对象的messageHandle方法

然后定义方法

都搞定了 然后  测试


页面下面用的vue绑定的对象  {{shuju}} 用于显示  到此结束  

object 支持 postMessage 传值

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue