用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. 面试:C++实现访问者模式

    参考:深入应用C++11,访问者模式 #include <iostream> class ConcreteElement1; class ConcreteElement2; class V ...

  2. Java关键字(一)——instanceof

    instanceof 严格来说是Java中的一个双目运算符,用来测试一个对象是否为一个类的实例,用法为: boolean result = obj instanceof Class 其中 obj 为一 ...

  3. 整合Spring和SpringMVC

    1.Spring容器和SpringMVC容器的关系 Spring容器是一个父容器,SpringMVC容器是一个子容器,它继承自Spring容器.因此,在SpringMVC容器中,可以访问到Spring ...

  4. [转]Angular2 Material2 封装组件 —— confirmDialog确定框

    本文转自:https://www.jianshu.com/p/0c566fc1730d 环境: Angular 4.0.0 Angular2 Material2 2.0.0-beta.3 node v ...

  5. 【手记】解决涉及office的程序报“Unable to cast COM object of type System._ComObject...”的问题

    报错内容大概像这种: 如果该电脑曾经装过WPS,那解决方法就是把WPS装回来,可以不用,但别卸,把它供着,惹不起.

  6. TCP/IP 详解

    分层 每一层负责不同的功能:     链路层 有时也称作数据链路层或网络接口层, 通常包括操作系统中的设备驱动程序和计算机 中对应的网络接口卡.它们一起处理与电缆(或其他任何传输媒介)的物理接口细节. ...

  7. Windows环境使用Nexus-3.x搭建Maven私服

    [前言] 本文主要讲解在Wiindows环境下搭建最新出的Nexus 3.x私服. 1.搭建私服的必要性 一般情况下,各个公司的开发团队为了提高开发效率,都会使用项目构建工具进行开发.常见的构建工具有 ...

  8. Java并发编程:Java的四种线程池的使用,以及自定义线程工厂

    目录 引言 四种线程池 newCachedThreadPool:可缓存的线程池 newFixedThreadPool:定长线程池 newSingleThreadExecutor:单线程线程池 newS ...

  9. 现如今的CDN网站加速技术,细说CDN

    CDN技术应用越来越广泛的被各大互联网公司所应用.已经成为了互联网企业离不开的一种网络运维方式.什么是CDN? CDN 利用全局负载均衡技术将用户的访问指向离用户最近的工作正常的流媒体服务器上,由流媒 ...

  10. C# 填充Excel

    1.添加引用 Microsoft.Office.Interop.Excel; 2.使用命名空间 using Microsoft.Office.Interop.Excel; 3.填充EXCEL单元格方法 ...