用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. leetcode — add-two-numbers

    import java.util.ArrayList; import java.util.LinkedList; import java.util.List; /** * Source : https ...

  2. 自己动手实现java数据结构(八) 优先级队列

    1.优先级队列介绍 1.1 优先级队列 有时在调度任务时,我们会想要先处理优先级更高的任务.例如,对于同一个柜台,在决定队列中下一个服务的用户时,总是倾向于优先服务VIP用户,而让普通用户等待,即使普 ...

  3. Cassandra 数据模型

    Cassandra的数据模型类似于关系型数据库的模型,且提供了与SQL语言非常类似的CQL语言进行操作. 但是Cassandra的数据模型类似于多层键值对结构,与关系型数据库存在巨大差别. 本文基于: ...

  4. WCF返回表datatable时的解决

    在WCF中有时返回值类型是一张表,就会遇到反序列化的问题.解决该问题我归纳了两种方法: 1.根据Model层的类,在服务器端将Table转化成List,在客户端再将List转化为table /// 将 ...

  5. 网络编程socket之一

    从今年10月22号开始我的python学习之路,一个月下来,磕磕碰碰,勉勉强强把基础部分算是学完了,一个月走过来,我过着别人看似单调,重复的生活,确实是,每天,每周都是一样的生活模式,早上7点40起床 ...

  6. php模拟post提交请求,调用接口

    /** * 模拟post进行url请求 * @param string $url * @param string $param */ function request_post($url = '', ...

  7. oracle sql优化的几种方法

    1.最基本最简单的方式是减少访问数据库的次数.oracle在内部执行了许多工作,比如解析SQL语句, 估算索引的利用率,  读数据块等等,都将大量耗费oracle数据库的运行 2.选择最有效率的表名顺 ...

  8. 【代码笔记】Web-ionic-创建APP的架构

    一,创建app的时候,index.html的主要架构. <!DOCTYPE html> <html> <head> <meta charset="u ...

  9. 03--css形状--css揭秘

    形状 一 自适应的椭圆 1.难题 1> 圆 你可能注意到过, 给任何正方形元素设置一个足够大的border-radius, 就可以把它变成一个圆形.所用到的CSS 代码如下所示: #bd { w ...

  10. PyCharm实现高效远程调试代码

      PyCharm实现高效远程调试代码   (薛刚强)    为方便Python代码学习和项目开发,目前选择专业的 IDE 开发工具 ,如 PyCham.针对个人使用的技巧做个笔记,分享给大家,有描述 ...