用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. linux下修改时间和时区

    一.修改linux的时间在root用户下,使用date指令:date -s1.只修改日期,不修改时间,输入: date -s -- 2.只修改时间,输入: date -s :: 3.同时修改日期时间, ...

  2. JS 从斐波那契数列浅谈递归

    一.前言 昨晚下班后,经理出于兴趣给我们技术组讲了讲算法相关的东西,全程一脸懵逼的听,中途还给我们出了一道比较有趣的爬楼问题,问题如下: 假设一个人从地面开始爬楼梯,规定一步只能爬一坎或者两坎,人只能 ...

  3. 常见HTTP状态码及URL编码表

    常见HTTP状态码 1xx: 信息          (用于表示临时响应并需要请求者执行操作才能继续的状态代码) 消息: 描述: 100 Continue 服务器仅接收到部分请求,但是一旦服务器并没有 ...

  4. [JZOJ5836] Sequence

    Problem 题目链接 Solution 吼题啊吼题! 首先如何求本质不同的子序列个数就是 \(f[val[i]]=1+\sum\limits_{j=1}^k f[j]\) 其中 \(f[i]\) ...

  5. Hibernate session中的createCriteria方法

    在应用中获取session对象: Session session=  HibernateUtil.getSession(); List list=session.createCriteria(Mete ...

  6. Flask wtforms实现简单的登录注册

    目录结构 视图 # -*- coding:utf-8 -*- # Author : Niuli # Data : 2019-02-27 19:26 from flask import render_t ...

  7. Go开发之路 -- Go语言基本语法 - 作业

    1. 判断101 - 200之间有多少个素数,并输出所有素数. package main import ( "fmt" ) var count = 0 func prime(a, ...

  8. lfs(systemd版本)学习笔记-第4页

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! lfs(systemd版本)学习笔记-第3页 的地址:https://www.cnblogs.com/renren-study- ...

  9. 【工具相关】Web-Sublime Text2-通过Package Control安装插件

    一,Sublime Text2--->Preferences--->Package Control-->输入install---> 下方就会提示“Package Control ...

  10. 【读书笔记】iOS-单元测试工具

    一,单元测试工具. 1,OCUnit 苹果自带的. 2,GHUnit GHUnit是Objective-C语言里的另外一种单元测试工具. GHUnit- https://github.com/gh-u ...