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. 同一子网建立ssh通道,映射到本地

    在办公室有一台机器连入同一子网络,开启jupyter-notebook但是只能在这台机器上访问到,怎样可以在家也可以访问呢? 此时最简单的方法是在本地建立一个ssh通道: 在本地终端中输入 ssh u ...

  2. 路由网关--spring cloud zuul

    路由网关--spring boot Zuul 1.为什么需要Zuul? Zuul Ribbon 以及 Eureka 相结合,可以实现智能路由和负载均衡的功能, Zuul 能够将请求流量按某种策略分发到 ...

  3. 【转】前后端分离架构:web实现前后端分离,前后端解耦

    一.前言 ”前后端分离“已经成为互联网项目开发的业界标杆,通过Tomcat+Ngnix(也可以中间有个Node.js),有效地进行解耦.并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构 ...

  4. fiddler增加ip以及响应时间列

    最近打算看一下移动端app的响应等请求,这里打算用fillder来查看appium的模拟出发请求的操作来查看结果, 所以我们需要在左侧的面板增加我们所需要的ip,响应时间等数据以方便我们查看 fidd ...

  5. vbs,修改文件名

    一次性能测试记录,因为项目要批量上传文件,奈何文件有50 * 2个,然后系统效验文件名,要不停地修改,找了一些资料整理脚本如下: strFolder = "\\xxxx\2018198_数据 ...

  6. php获取网页源码分行显示

    file(PHP 3, PHP 4 )file -- 把整个文件读入一个数组中说明:file ( string filename [, int use_include_path [, resource ...

  7. 使用Objective-C的+(void)initialize初始化static变量

    在<Objective C类方法load和initialize的区别>一文中,我介绍了Objective-C对待+(void)initialize和+(void)load两个方法在编译和执 ...

  8. angularjs 中使用 service 在controller 之间 share 对象和数据

    在做angularjs 的UI 时,我们经常会遇到一个页面之间有几个controller,在controller 之间share 公共的一些数据和方法就变得比较困难,目前推荐的做法是创建一个servi ...

  9. js滚动到顶部底部代码

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>SCROLL</t ...

  10. yield和生成器, 通过斐波那契数列学习(2.5)

    实现斐波那契数列的集中方法 返回一个数 def fib(max): n, a, b = 0, 0, 1 while n < max: print(b) a, b = b, a+b n += 1 ...