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, ...
随机推荐
- Linux账号管理与ALC权限设定(一)
UID 与 GID UID用户的编号 GID 用户群组的编号 账号登录时,有一个对应的文本来记录某个账户的UID与GID.然后获得这个UID去对应的密码文本中,取得密码进行比对,然后登陆. 保 ...
- Spring注解详解(转)
概述 注释配置相对于 XML 配置具有很多的优势: 它可以充分利用 Java 的反射机制获取类结构信息,这些信息可以有效减少配置的工作.如使用 JPA 注释配置 ORM 映射时,我们就不需要指定 PO ...
- Android Studio奇淫巧技
目录 3.1 Android Studio使用初探 Project面板 Stucture面板 Android Monitor Keymap Tip of the Day 快速查找 Search Act ...
- 云栖PPT下载 | 开源界大咖集体现身,开源数据库专场重点再回眸!
阿里云开源数据库项目最新发布 阿里巴巴集团副总裁.阿里云智能数据库事业部总裁.高级研究员李飞飞(飞刀).阿里云数据库资深技术专家楼方鑫(黄忠)以及阿里云数据库技术专家傅宇(齐木)三位阿里云技术专家为大 ...
- Yii2中的规则
//Yii2中的规则,用户名的规则,1.用户名只能是字母 2.判断用户名已经存在 3.用户名的长度 4.用户名不能为空 [['username'], 'match', 'pattern' => ...
- 欧拉降幂,基本计算定理——cf615D
用基本算数定理求约数和的思想来计算, 首先用pi,ci来表示第i个质数,指数为i,然后对于每个pi,pi^2...都有指数为mul{(c_1+1)(c_2+1)(c_i-1+1)(c_i+1+1).. ...
- sqlmap用户手册详解【实用版】
网上的sqlmap教程很多,但是我自己备忘小笔记都是在我的电脑上存着了,万一我要出去玩的时候,有点忘了,还得再百度翻翻,还不如发到我自己知乎上,忘了立马一看就记着了.虽说我的sqlmap备忘小笔记汇总 ...
- bootstrap 的 datetimepicker,同时有日期和时间, 且开始时间要早于结束时间
首先,引入jquery, bootstrap 和 bootstrap-datetimepicker datetimepicker的下载地址: http://www.bootcss.com/p/boot ...
- CSS:目录
ylbtech-CSS:目录 1.返回顶部 1. http://www.runoob.com/css/css-tutorial.html 2. https://www.w3school.com.cn/ ...
- shell txt1写入txt2,并放在txt2中指定字符串的后面
# 先找到指定字符串aaa的行号 row=`grep -w -n "aaa" txt2 | cut -d ":" -f 1` # 将txt1中内容写入txt2中 ...