用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的更多相关文章

  1. 彻底掌握CORS跨源资源共享

    本文来自于公众号链接: 彻底掌握CORS跨源资源共享 ) 本文接上篇公众号文章:彻底理解浏览器同源策略SOP 一.概述 在云时代,各种SAAS应用层出不穷,各种互联网API接口越来越丰富,H5技术在微 ...

  2. CORS跨源资源共享概念及配置(Kubernetes Ingress和Spring Cloud Gateway)

    我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 跨源资源共享CORS 跨源资源共享 (CORS) (或通俗地译为跨域资源共享)是一种基于HTTP 头的机制,该机制通过 ...

  3. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  4. 对iframe跨域通信的封装

    github源码:https://github.com/boycy815/topProxy 为了偷懒所以依赖了Kissy:http://docs.kissyui.com/ 用法举例:需求是在http: ...

  5. iframe跨域通信实战

    "长时间不写文章,开头的方式总是那么出奇的相似",最近很忙,好久没写博客了啊(是不是?). 更换工作已经有三个月有余,这段三个月把过去三年没加过的班都加了一次.收获挺多,发现的问题 ...

  6. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度(JavaScript)

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  7. 封装一个postMessage库,进行iframe跨域交互

    这是近期个人在开发chrome插件时的其中一个小总结.还有很多没有总结出来.因为目前插件还在迭代中,(herry菌插件,用于B站C站),属于个人业余的一个小项目.还有很多功能没有实现,以及还需要再看能 ...

  8. iframe跨域+

    script.image.iframe的src都不受同源策略的影响.所以我们可以借助这一特点,实现跨域.如前面所介绍的JSONP跨域,以及灯标(Beacons). 该篇随笔主要阐述iframe结合一些 ...

  9. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

随机推荐

  1. 海量日志实时收集系统架构设计与go语言实现

    日志收集系统应该说是到达一定规模的公司的标配了,一个能满足业务需求.运维成本低.稳定的日志收集系统对于运维的同学和日志使用方的同学都是非常nice的.然而这时理想中的日志收集系统,现实往往不是这样的. ...

  2. 自己动手实现java数据结构(六)二叉搜索树

    1.二叉搜索树介绍 前面我们已经介绍过了向量和链表.有序向量可以以二分查找的方式高效的查找特定元素,而缺点是插入删除的效率较低(需要整体移动内部元素):链表的优点在于插入,删除元素时效率较高,但由于不 ...

  3. Mysql 5.7 基于组复制(MySQL Group Replication) - 运维小结

    之前介绍了Mysq主从同步的异步复制(默认模式).半同步复制.基于GTID复制.基于组提交和并行复制 (解决同步延迟),下面简单说下Mysql基于组复制(MySQL Group Replication ...

  4. spring-boot-2.0.3应用篇 - shiro集成

    前言 上一篇:spring-boot-2.0.3源码篇 - 国际化,讲了如何实现国际化,实际上我工作用的模版引擎是freemaker,而不是thymeleaf,不过原理都是相通的. 接着上一篇,这一篇 ...

  5. Java设计模式学习记录-装饰模式

    前言 装饰模式也是一种结构型模式,主要是目的是相对于类与类之间的继承关系来说,使用装饰模式可以降低耦合度.JDK中有不少地方都使用到了装饰模式,例如Java的各种I/O流,javax.swing包中一 ...

  6. CentOS安装Subversion 1.9.*版本客户端

    安装yum仓库 以下以CentOS6为例,其他类似 # vim /etc/yum.repos.d/wandisco-svn.rep [WandiscoSVN] name=Wandisco SVN Re ...

  7. 设计模式-----Builder模式

    前言 近日,看到Myabtis中组件中SqlSessionFactory由SqlSessionFactoryBuilder().build()生成时,且采用Builder模式,遂记录学习之. SqlS ...

  8. oracle创建用户、创建表空间、授权、建表

    2.然后我就可以来创建用户了. create user zzg identified by zzg123; 3.创建好用户我们接着就可以修改用户的密码. alter user zzg identifi ...

  9. IdentityServer4-客户端定义-翻译

    客户端定义(Defining Client) 客户端可以从你的IDS服务器请求tokens. 通常,客户端需要遵循下面的通用设置: 一个唯一的Client ID 如果需要还可以提供密码 允许与toke ...

  10. hive 中date命令