H5新增的postMessage跨域解决方案Demo
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的更多相关文章
- JSON跨域解决方案收集
最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...
- 跨域解决方案一:使用CORS实现跨域
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...
- iframe跨域解决方案
公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面 ...
- js最全的十种跨域解决方案
在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...
- WebApi 跨域解决方案 --CORS
跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...
- 前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题.只有真正明白了各种方案的工作机制,才能针对性地进行跨域方案选型.本文将以探索者的视角,试图用最通俗的语言对一种"鼎鼎大名"的跨域解决方 ...
- localStorage和cookie的跨域解决方案
原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...
- 跨域解决方案 - 跨域资源共享cors
目录 1. cors 介绍 2. 原理 3. cors 解决跨域 4. 自定义HTTP 头部字段解决跨域 5. 代码演示 5. 参考链接 1. cors 介绍 cors 说的是一个机制,其实相当于一个 ...
- asp.net web api2.0 ajax跨域解决方案
asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种. 一,ASP.NET Web API支持JSONP,分两种 1, ...
随机推荐
- docker build 时 alpine 无法安装软件问题的解决
使用 alpine 作为 docker 基础镜像时,运行 apk add ..... 遇到如下错误: WARNING: Ignoring http://dl-cdn.alpinelinux.org/a ...
- java中继承条件下构造方法的执行过程
继承条件下构造方法的调用规则如下: 情况1:如果子类的构造方法中没有通过super显式调用父类的有参构造方法,也没有通过this显式调用自身的其他构造方法,则系统会默认先调用父类的无参构造方法.在这种 ...
- volatile(防止编译器对代码进行优化)
adj.易变的:无定性的:无常性的:可能急剧波动的 网络挥发性:挥发性的:不稳定的 volatile的变量是说这变量可能会被意想不到地改变,这样,编译器就不会去假设这个变量的值了.
- 利用SparkSQL(java版)将离线数据或实时流数据写入hive的用法及坑点
1. 通常利用SparkSQL将离线或实时流数据的SparkRDD数据写入Hive,一般有两种方法.第一种是利用org.apache.spark.sql.types.StructType和org.ap ...
- 对AngularJs的简单了解
一.简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得 ...
- jQuery, js 验证两次输了密码的一相同
<div class="form-group"> <label class="col-sm-2 control-label font"> ...
- springboot设置静态资源缓存一年
由于本人所在项目组,所用的项目是前后端分离的,前端是React 的SPA,每次打包都会新版本的静态文件. 然而,在有些时候,这些静态资源是不变的,故可以将资源缓存至用户本地,提升性能. 写法如下,需要 ...
- 2-Harris角点检测
1. 何为角点? 下面有两幅不同视角的图像,通过找出对应的角点进行匹配. 再看下图所示,放大图像的两处角点区域: 我们可以直观的概括下角点所具有的特征: >轮廓之间的交点: >对于同一场景 ...
- BZOJ 3238: [Ahoi2013]差异((单调栈+后缀数组)/(后缀树))
[传送门[(https://www.lydsy.com/JudgeOnline/problem.php?id=3238) 解题思路 首先原式可以把\(len\)那部分直接算出来,然后通过后缀数组求\( ...
- delphi基础篇之数据类型之二:2.字符串类型
2.字符串类型 2.1.ShortStringShortString 又称为短字符串(相对的,Ansistring.widestring.unicodestring 称为长字符串),其实质上是一个编译 ...