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. Ubuntu14.04.1LTS不能上网解决方法之一

    我们在装好了Ubuntu之后,打开浏览器,显示Server not found. 1.点击网络图标,显示如下: 2.进入etc/NetworkManager,找到 Networkmanager.con ...

  2. case ...esac判断 function方法 循环loop,while do done,until do done

    就类似于其他语言中的case语句 用法 要点 第一 开始结束  case  esac 正好相反 第二  每段程序段需要用  两个:号结束. 例: } in "hello") ech ...

  3. windows API 第22篇 WTSGetActiveConsoleSessionId

    函数原型:DWORD WTSGetActiveConsoleSessionId (VOID)先看一下原文介绍: The WTSGetActiveConsoleSessionId function re ...

  4. CF817E Choosing The Commander

    \(\mathtt{CF817E}\) \(\mathcal{Description}\) 有 \(q\) 个操作\((1 \leq q \leq 10^{5})\): 1.加入一个数 \(p_i(1 ...

  5. 【leetcode】966. Vowel Spellchecker

    题目如下: Given a wordlist, we want to implement a spellchecker that converts a query word into a correc ...

  6. robotframework+python3+selenium自动化测试环境搭建---第一集

    1.安装python3.6 1.1 可选择Customize installation自定义安装内容,记得要勾选Add to PATH(这样就不用自己配置环境变量了). 1.2 安装成功后,可以输入p ...

  7. 「题解」:$Smooth$

    问题 A: Smooth 时间限制: 1 Sec  内存限制: 512 MB 题面 题面谢绝公开. 题解 维护一个队列,开15个指针,对应前15个素数. 对于每一次添加数字,暴扫15个指针,将指针对应 ...

  8. 强制位(set uid和set gid)与冒险位(sticky)的作用都有什么

    1.set uid(强制位) 只能对文件进行设置 通过对文件设置uid可以使非文件拥有者或文件所属群组的用户具有执行该文件的权限. 例如ping,默认情况下所有用户都可以使用此命令,但当我们查看pin ...

  9. base64和Xxtea的加密和解密

    base64和Xxtea的加密和解密 数据加密是web数据安全的一种方式,前几天拿到一个base64+xxtea加密的数据,现在在这里整理一下使用的过程.首先当然是全网站找解密方法,但是最后的结果不是 ...

  10. jenkins的api操作

    jenkins-client 实现方式 jenkins-client 底层是使用 HttpClient HttpPost 发送post 请求实现的,是将 REST API 封装了一下 添加依赖 < ...