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网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...
随机推荐
- Java 8 新特性-菜鸟教程 (7) -Java 8 Nashorn JavaScript
Java 8 Nashorn JavaScript Nashorn 一个 javascript 引擎. 从JDK 1.8开始,Nashorn取代Rhino(JDK 1.6, JDK1.7)成为Java ...
- Spring的第四天AOP之注解版
Spring的第四天AOP之注解版 ssm框架 spring 在上一篇博客中,介绍了Spring的AOP的xml版本的使用,在这篇博客中,我将介绍一下,注解版的使用. 常用注解 注解 通知 @Aft ...
- Ansible系列(四):playbook应用和roles自动化批量安装示例
Ansible系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html playbook是ansible实现批量自动化最重要的手段.在其中可以使用变 ...
- ServerSocket和Socket
前言 用ServerSocket和Socket做了个Server.Client通信的demo,以及学习下在这个demo过程中用到java.net.java.io包下几个常用的类. Server imp ...
- IE8浏览器官方下载 包含Windows中繁英文各个版本
当你的Windows XP安裝IE8时提示"此安装不支持您的操作系统的当前语言",或者安装IE8,在语言包安装时报错,可以尝试使用先安装英文版本,再安装多国语言包的方式操作. 20 ...
- c# 导出表格
var record = m_editor.getMasterRecord(); var Check_Id = record.Check_Id; var url = "/Storage/St ...
- 导入本地的oracle数据库文件
1. 创建表空间 create tablespace charge_zang datafile 'F:\app\zang\oradata\orcl\charge_zang.dbf' size 50M ...
- JS读取服务器返回的XMl格式字符串
function PostSMS(phoneNumber, sessionID, requestUrl, successAction) { $.ajax( { type: 'POST', url: r ...
- [android] 手机卫士手机实现短信指令获取位置
获取位置 新建一个service的包 新建一个GPSService类继承系统的Service类 清单文件中注册一下 重写onCreate()方法,服务创建的时候回调 重写onDestroy()方法, ...
- API输出的时候是return还是echo?
写php API写的很少,最近才开始接口的写法,在框架里面一直用return,但是在api中retrun就失效了,为什么呢? 网友给出的答案: 1. return 一般用于函数或方法的返回. echo ...