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, ...
随机推荐
- 2018-2-13-win10-uwp-资源字典
title author date CreateTime categories win10 uwp 资源字典 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...
- KiCAD原理图更换库
KiCAD原理图库更换 将AD的工程文件转换位KiCAD后,打开原理图,系统会自动压缩生成当前工程库,但是这样将原理图复制粘贴到其他地方时,就找不到库了,原理图就会无法显示器件符号,如何将库替换为我们 ...
- MySQL索引与事务
MySQL索引与事务 链接:https://pan.baidu.com/s/1ANGg3Kd_28BzQrA5ya17fQ 提取码:ekpy 复制这段内容后打开百度网盘手机App,操作更方便哦 1.索 ...
- 编译错误提示PATH_MAX未声明
解决办法: grep一下,发现PATH_MAX在limits.h中定义,在/scripts/mod/sumversion.c中添加#include <limits.h>即可. #inclu ...
- laravel ajax提交报错Symfony\Component\HttpKernel\Exception\HttpException
出现此种错误,通常是没有提交安全验证 params = { id: 2, _token: '{{ csrf_token() }}' } function cancel() { var url = &q ...
- mysql5.7问题:[Note] InnoDB: Waiting for page_cleaner to finish flushing of buffer pool
在关闭mysql5.7的时候发现问题,一直处于夯住状态 [root@localhost ~]# /etc/init.d/mysqld stop Shutting down MySQL......... ...
- leetcode-160周赛-5239-循环码排列
题目描述: 参考格雷编码: class Solution: def circularPermutation(self, n: int, start: int) -> List[int]: res ...
- Delphi 滚动条的使用
DELPHI的滚动条默认发送消息格式: function TControl.Perform( Msg: Cardinal; WParam: WPARAM; LParam: LPARAM): LRESU ...
- 构造——cf1213E
分情况讨论,构造很简单 #include<bits/stdc++.h> using namespace std; #define N 200005 ],t[]; int n,s1,s2,t ...
- python对具有宏excel的操作
一.使用win32com库 安装pip install pypiwin32 import win32com.client #excel xlApp =win32com.client.DispatchE ...