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. elasticsearch学习笔记001

    <Elasticsearch 核心技术与实战>课程Github代码 https://github.com/onebirdrocks/geektime-ELK 运行的环境: windows ...

  2. es的日期格式

    https://www.elastic.co/guide/en/elasticsearch/reference/2.3/mapping-date-format.html 在es中,默认的时间类型为da ...

  3. Faster-RCNN论文精读

    State-of-the-art object detection networks depend on region proposal algorithms to hypothesize objec ...

  4. SQL SELECT DISTINCT

    SQL SELECT DISTINCT(选择不同) 语法 SELECT DISTINCT语法用于仅返回不同的(different)值. 在一张表内,一列通常包含许多重复的值; 有时你只想列出不同的(d ...

  5. 对Map的key按升序进行排序

    //对Map的key按升序进行排序 List<Map.Entry<Integer,Task>> mappingList = new ArrayList<Map.Entry ...

  6. 分治维护dp——19南昌网络赛C/cf750E

    南昌网络赛,是cf的原题 第一次做到这种题,所以认真想了下,每次给一个询问[L,R],要求出这个区间里有2017子序列,但是不能有2016子序列需要删掉的最少元素个数 首先如果我们之询问一小段区间[L ...

  7. eclipse git项目的冲突文件处理

    https://jingyan.baidu.com/article/3c48dd34895a07e10ae35871.html

  8. tp U函数 logs

    注意 U 函数 项目今天已经搞定了本以为可以上线了没问题了,但是 当我把tp调试模式关闭后:      define('APP_DEBUG',false); 页面完全加载不出来,于是开启:  'SHO ...

  9. fatal error C1047: 对象或库文件“.\x64\Release\Des.obj”是使用比创建其他对象所用编译器旧的编译器创建的;请重新生成旧的对象和库

    问题描述: 在把一个32位的dll编译成64位的时候提示上面的错误 解决办法: >属性->常规->项目默认值->全程序优化  将这里的默认项 "使用链接时间代码生成& ...

  10. hive元数据格式化 在hive中执行sql语句:SemanticException org.apache.hadoop.hive.ql.metadata.HiveException:

    https://blog.csdn.net/xiaoqiu_cr/article/details/80913437