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. python lambda表达式的两种用处

    1 用处1定义匿名函数 不带参数的: a = ") 带参数的 b = lambda x, y:x * y 2 当函数作为参数时,直接为该函数传参. def func1(m, n): retu ...

  2. lumen时区

    今天用 Lumen 框架写代码时, 也是初次体验 Lumen, 遇到了一个问题, 从数据库里查出的时间比数据库里保存的 TIMESTAMP 时间慢了8个小时, 很明显这是一个时区设置的问题, 本以为可 ...

  3. python转化13位时间戳

    # -*- coding: utf-8 -*- def get_time_stamp13(datetime_obj): import datetime, time # 生成13时间戳 eg:15578 ...

  4. 第十章、hashlib模块和hmac模块

    目录 第十章.hashlib模块和hmac模块 一.hashlib模块 二.hash模块 第十章.hashlib模块和hmac模块 一.hashlib模块 hash是一种算法,接收传入的内容,经过运算 ...

  5. Ceph自动化部署----Ceph-ansible

    目录 Ceph自动化部署----Ceph-ansible 一.前言--Ceph的几种不同的部署方式 二.使用Ceph-ansible部署Ceph Ceph自动化部署----Ceph-ansible 一 ...

  6. XDCTF2014 Writeup

    Web50 猜谜语类题目?FLAG在图片中有一些字符的 ASCii值,拼起来就是FLAG. Web100 隐写术.使用工具 StegSolve,把任一颜色的bit0拼起来图片的最开始部分即为  fla ...

  7. selenium设置Chrome浏览器不出现通知,设置代理IP

    from selenium import webdriver PROXY = "" chrome_options = webdriver.ChromeOptions() prefs ...

  8. Summer training #8

    A: B:按题意直接暴力找符合题意的数的个数 #include <bits/stdc++.h> #include <cstring> #include <iostream ...

  9. [转]DSL-让你的 Ruby 代码更优秀

    https://ruby-china.org/topics/38428 以下摘录 DSL和Gpl DSL : domain-specific language.比如HTML是用于组织网页的‘语言’, ...

  10. 给定一个矩阵 A, 返回 A 的转置矩阵。

    给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]]输出:[[1,4,7], ...