Demo背景:html中使用iframe嵌入了跨域的vue项目,在html中将参数传入到跨越的vue项目中。

向跨越的子窗口中发送数据

function sendMessage(data) {
// 通过 postMessage 向子窗口发送数据
document.querySelector(".ifm_analysis").contentWindow.postMessage(data, "*")
}

在跨越的子窗口中接收数据

// 记录vue实例地址的变量
let currVM
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// event.source.postMessage("", event.origin);
// 页面转入子窗口页面时,启动检测监听的参数
if (document.location.href.indexOf("consignew") > -1) {
// 调用vue实例中的searchConsignsByIdArr方法
currVM.searchConsignsByIdArr(event.data)
}
}

H5新增的postMessage跨域解决方案Demo的更多相关文章

  1. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

  2. 跨域解决方案一:使用CORS实现跨域

    跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...

  3. iframe跨域解决方案

    公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面 ...

  4. js最全的十种跨域解决方案

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...

  5. WebApi 跨域解决方案 --CORS

    跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...

  6. 前端跨域解决方案: JSONP的通俗解说和实践

     对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...

  7. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  8. 跨域解决方案 - 跨域资源共享cors

    目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...

  9. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

随机推荐

  1. Linux账号管理与ALC权限设定(一)

    UID  与   GID UID用户的编号  GID 用户群组的编号 账号登录时,有一个对应的文本来记录某个账户的UID与GID.然后获得这个UID去对应的密码文本中,取得密码进行比对,然后登陆. 保 ...

  2. Spring注解详解(转)

    概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...

  3. Android Studio奇淫巧技

    目录 3.1 Android Studio使用初探 Project面板 Stucture面板 Android Monitor Keymap Tip of the Day 快速查找 Search Act ...

  4. 云栖PPT下载 | 开源界大咖集体现身,开源数据库专场重点再回眸!

    阿里云开源数据库项目最新发布 阿里巴巴集团副总裁.阿里云智能数据库事业部总裁.高级研究员李飞飞(飞刀).阿里云数据库资深技术专家楼方鑫(黄忠)以及阿里云数据库技术专家傅宇(齐木)三位阿里云技术专家为大 ...

  5. Yii2中的规则

    //Yii2中的规则,用户名的规则,1.用户名只能是字母 2.判断用户名已经存在 3.用户名的长度 4.用户名不能为空 [['username'], 'match', 'pattern' => ...

  6. 欧拉降幂,基本计算定理——cf615D

    用基本算数定理求约数和的思想来计算, 首先用pi,ci来表示第i个质数,指数为i,然后对于每个pi,pi^2...都有指数为mul{(c_1+1)(c_2+1)(c_i-1+1)(c_i+1+1).. ...

  7. sqlmap用户手册详解【实用版】

    网上的sqlmap教程很多,但是我自己备忘小笔记都是在我的电脑上存着了,万一我要出去玩的时候,有点忘了,还得再百度翻翻,还不如发到我自己知乎上,忘了立马一看就记着了.虽说我的sqlmap备忘小笔记汇总 ...

  8. bootstrap 的 datetimepicker,同时有日期和时间, 且开始时间要早于结束时间

    首先,引入jquery, bootstrap 和 bootstrap-datetimepicker datetimepicker的下载地址: http://www.bootcss.com/p/boot ...

  9. CSS:目录

    ylbtech-CSS:目录 1.返回顶部 1. http://www.runoob.com/css/css-tutorial.html 2. https://www.w3school.com.cn/ ...

  10. shell txt1写入txt2,并放在txt2中指定字符串的后面

    # 先找到指定字符串aaa的行号 row=`grep -w -n "aaa" txt2 | cut -d ":" -f 1` # 将txt1中内容写入txt2中 ...