postMessage 实现跨源通信 iframe 跨域获取url
用postMessage实现跨源通信的方法实例
如:在www.bbb.com/index.html页面获取www.aaa.com/index.html的数据,以iframe的形式
www.aaa.com/index.html页面发送数据
<div id="login_form">
<iframe id="login" onload = "onLoad" src="www.bbb.com/index.html" width="400px" height="650px" frameborder="no" scrolling="no"></iframe>
</div> function onLoad() {
var iframe = document.getElementById('login');
var win = iframe.contentWindow;
win.postMessage('{name:"ling",sex:"0"}','*')
}
www.bbb.com/index.html页面接收数据
window.onmessage = function (e) {
e = e || event;
if (e.origin !== 'https://captcha.luosimao.com bbb项目里用到的url但是项目aaa没有用到') {
console.log(e.data)
}
}
postMessage 实现跨源通信 iframe 跨域获取url的更多相关文章
- 彻底掌握CORS跨源资源共享
本文来自于公众号链接: 彻底掌握CORS跨源资源共享 ) 本文接上篇公众号文章:彻底理解浏览器同源策略SOP 一.概述 在云时代,各种SAAS应用层出不穷,各种互联网API接口越来越丰富,H5技术在微 ...
- CORS跨源资源共享概念及配置(Kubernetes Ingress和Spring Cloud Gateway)
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 跨源资源共享CORS 跨源资源共享 (CORS) (或通俗地译为跨域资源共享)是一种基于HTTP 头的机制,该机制通过 ...
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
- 对iframe跨域通信的封装
github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...
- iframe跨域通信实战
"长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- 封装一个postMessage库,进行iframe跨域交互
这是近期个人在开发chrome插件时的其中一个小总结.还有很多没有总结出来.因为目前插件还在迭代中,(herry菌插件,用于B站C站),属于个人业余的一个小项目.还有很多功能没有实现,以及还需要再看能 ...
- iframe跨域+
script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...
- 使用HTML5中postMessage实现Ajax中的POST跨域问题
HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
随机推荐
- 实验吧 burpsuie拦截修改请求
Forbidden 解题链接:http://ctf5.shiyanbar.com/basic/header/ 把language改成zh-hk,go,flag到手 Forms 题目地址:http:// ...
- jenkins+Android+gradle持续集成
本文Android自动化打包采用jenkins+gradle+upload to pyger的方式来实现,job执行完后只需要打开链接扫描二维码即可下载apk. 一.环境准备 1.下载Android ...
- ArcGIS紧凑型切片读取与应用1-解析(附源码)
1.前言 ArcGIS 发布的切片服务分为紧凑型切片和传统的分散型切片以及最新ArcGIS por新增的矢量切片.传统的分散型切片面临的问题是文件个数太多,部署拷贝过程十分的耗时,紧凑型切片是对分散型 ...
- 【学习笔记】JS设计模式总结
前言:这段时间都在学习Vue的知识,虽然手边放着一本js高程,但确实好久没有好好复习了.温故而知新,因此特意把JS常见的设计模式总结,希望对大家有所帮助... 1. 工厂模式 释义:像工厂一样流水线般 ...
- Go 标准库 —— sync.Mutex 互斥锁
Mutex 是一个互斥锁,可以创建为其他结构体的字段:零值为解锁状态.Mutex 类型的锁和线程无关,可以由不同的线程加锁和解锁. 方法 func (*Mutex) Lock func (m *Mut ...
- python学习笔记02--列表和元组
一.简介 数据结构是通过某种方式组织在一起的数据元素的集合. 序列是python中最基本的数据结构,python中包含6种内建的序列,分别是列表.元组.字符串.Unicode字符串.buffer对象和 ...
- Linux 强制安装 rpm 包
Linux 正常安装 rpm 的命令是: rpm -ivh xxx.rpm 重复安装时需加属性: 软件包重复安装将会失败,若仍需要安装必须加 --replacepkgs 属性 软件包的某个文件已在安装 ...
- Nginx 500错误总结
Nginx 500错误总结 500(服务器内部错误) 服务器遇到错误,无法完成请求. 501(尚未实施) 服务器不具备完成请求的功能.例如,当服务器无法识别请求方法时,服务器可能会返回此代码. 502 ...
- table垂直居中
th,td{ text-align:center;/** 设置水平方向居中 */ vertical-align:middle/** 设置垂直方向居中 */ }
- php curl中x-www-form-urlencoded与multipart/form-data 方式 Post 提交数据详解
multipart/form-data 方式 post的curl库,模拟post提交的时候,默认的方式 multipart/form-data ,这个算是post提交的几个基础的实现方式. $post ...