parent-index.html: (本地起服务,放在5000端口上)

<div class="content">
<iframe src="http://localhost:5001/public/second.html" id="sendMessage" name="sendMessage" onload="resize()"></iframe>
</div>
<script type="text/javascript">
//当前脚本
function resize() {
var ifr = document.getElementById('sendMessage');
//使用iframe的window向iframe发送message。
ifr.contentWindow.postMessage("123", "http://localhost:5001");
window.addEventListener('message', function (e) {
alert('回传 ' + e.data)
})
}
</script>

child-second.html: (本地起服务,放在5001端口上)

<div class="content">
<div id="howMuch">xxxxx</div>
</div>
<script type="text/javascript">
window.addEventListener('message', receiver, false);
function receiver(e) {
if (e.data) {
console.log(e)
// 注释掉的为单次父子交互
// var obj = {'name': 'qwer','age': 'xxx'}
// e.source.postMessage(JSON.stringify(obj), e.origin);
// console.log(e.data)
document.getElementById('howMuch').onclick = function second() {
// 父子建立联系后,儿子html可以通过点击事件多次主动向父亲传值
var obj = {'name': 'qwer','age': 'xxx'}
window.parent.postMessage(JSON.stringify(obj), 'http://localhost:5000')
}
} else {
alert(e.data);
}
}
</script>

.

iframe 跨域传参的更多相关文章

  1. vue 组件传参及跨域传参

    可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...

  2. apiCloud中api.ajax方法跨域传参获取数据

    apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...

  3. JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  4. 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  5. CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie

    1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...

  6. 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法

    单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...

  7. 关于iframe跨域实践

    提要 项目中与到iframe子页面中需要通过top获取在父页面中的全局变量的需求,由于App部署的缘故,导致父页面和iframe子页面分别在不同的端口下,导致iframe跨域现象,通过查阅资料进行问题 ...

  8. iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解

    详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...

  9. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

随机推荐

  1. java 获取视频时间

    //先将视频保存到项目生成临时文件,获取时长后删除临时文件 // 使用fastdfs进行文件上传 @RequestMapping("/uploadVideoToFast") @Re ...

  2. mysql计算QPS

    首先连接上mysql: $ mysql -h .x -P3306 -uusername -p123456 进入Mysql之后,查询general_log: mysql> SHOW VARIABL ...

  3. JavaWeb【六、JavaBean】

    简介 JavaBean是符合设计原则的Java类.好处是提高可复用性,减少冗余,增强可维护性. JavaBean设计原则 共有类 无参共有构造 属性私有 getter和setter方法 JSP动作元素 ...

  4. fastadmin中上传配置

    配置文件位于下图,默认代码如下 <?php //上传配置 return [ /** * 上传地址,默认是本地上传 */ 'rootpath' => '/uploads/', 'upload ...

  5. Delphi 通过ADO连接数据库

  6. CentOS 安装 elasticsearch 注意点

    注意点: 1. 从官网下载以 rpm 结尾的软件包 7.3.1版本 下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elastic ...

  7. Beta冲刺——星期三

    这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 飞猪们 这个作业的目标 剩余任务预估,分配任务(开发,测试等).按要求提交当天冲刺报告. ...

  8. Java语言基础(12)

    1 构造方法重载 在一个类内部,编写多个构造方法,创建对象的时候,根据需求的不同,调用不同的构造方法创建对象,实现不同的初始化. 案例:Demo1 public class Demo1 { publi ...

  9. python 之多线程join()

    join()其实就是阻塞线程,控制线程的执行,从而控制住代码的执行顺序. 参照这篇文章:python3对多线程join的理解 通常都是,线程join()后,顺序执行join()后面的代码,如下面的例子 ...

  10. 访问网络资源的方式--application/json和x-www-form-urlencoded

    以Jsoup为例,x-www-form-urlencoded方式 Map<String,Object> map = new HashMap<>(); map.put(" ...