iframe 跨域传参
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 跨域传参的更多相关文章
- vue 组件传参及跨域传参
可以完成跨组件传参的四种方式 // 1) localStorage:永久存储数据 // 2) sessionStorage:临时存储数据(刷新页面数据不重置,关闭再重新开启标签页数据重置) // 3) ...
- apiCloud中api.ajax方法跨域传参获取数据
apiCloud中的ajax方法,可以自动处理跨域访问数据,不必使用jsonp来处理了. 使用ajax方法,必须要在apiready = function() {}方法中 获取参数 var pageP ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法
单点登录需要在需要进入的子系统B中添加一个类,用于接收A系统传过来的参数: @Action(value = "outerLogin", results = { @Result(na ...
- 关于iframe跨域实践
提要 项目中与到iframe子页面中需要通过top获取在父页面中的全局变量的需求,由于App部署的缘故,导致父页面和iframe子页面分别在不同的端口下,导致iframe跨域现象,通过查阅资料进行问题 ...
- iframe 跨域问题解决方案 利用window.name+iframe跨域获取数据详解
详解 前文提到用jsonp的方式来跨域获取数据,本文为大家介绍下如何利用window.name+iframe跨域获取数据. 首先我们要简单了解下window.name和iframe的相关知识.ifra ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
随机推荐
- img 图像底部留白的原因以及解决方法
有时候,我们在添加图片img标签后并没有给该标签设置magrin属性的margin-bottom值,在有些浏览器中打开就会出现图像底部留白,为什么为造成这个原因?下面就来进行分析:由于img元素默认为 ...
- day10 mysql常用操作
一. 目录 1.mysql的简介 2.增删改查操作 3.单表查询 4.多表查询常见的三种方式 5.pymysql模块操作数据库 二. 内容 一.mysql的简介 概述:mysql是一个关系型数据库, ...
- python 实现服务树结构化
1. 所有服务树数据 tree_list = [{'id': 1, 'pid': 0, 'name': '1211', 'path': '1211', 'leaf': 0, 'type': 0}, ...
- Delphi DLL文件的静态调用
- deep_learning_Function_list变量前面加星号,字典变量前面加两个星号
列表前面加星号作用是将列表解开成两个独立的参数,传入函数, 字典前面加两个星号,是将字典解开成独立的元素作为形参. def add(a, b): return a+b data = [4,3] pri ...
- C++ 内联函数 摘自 C++ 应用程序性能优化
内联函数 在C++语言的设计中,内联函数的引入可以说完全是为了性能的考虑.因此在编写对性能要求比较高的C++程序时,非常有必要仔细考量内联函数的使用. 所谓"内联",即将被调用函数 ...
- GridView 二维排布
与ListView一维排布相对 public class MainActivity extends Activity implements AdapterView.OnItemClickListene ...
- 1.python环境安装
一:安装Python与环境配置 二:安装pip 三:Anaconda安装和使用 3.1 什么是 Anaconda? Anaconda是专注于数据分析的Python发行版本,支持 Linux, Mac, ...
- shell脚本基础和grep文本处理工具企业应用3
文本处理工具: linux上文本处理三剑客 grep,egrep,fgrep:文本过滤工具(模式:pattern)工具 grep:默认支持的是基本正则表达式: ...
- linux TAILQ_ENTRY
#include <sys/queue.h> TAILQ_ENTRY 队列 http://www.360doc.com/content/15/1222/14/29292169_522271 ...