iframe跨域数据传递
2024-09-06 02:44:54
项目中需要和其他单位合作开发,方案采用iframe嵌入页面,开发过程中设计到了跨域数据的传递,初步方案决定使用html5 API postMessage进行iframe跨域数据传递;
域名A下的页面
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Page_1</title>
</head>
<body style="background: palegoldenrod;">
<div style="width:100%;height:100px;">这是父页面</div>
<div id="cont_father"></div>
<iframe id="page_1" src="http://192.168.100.40:4200/page2/index.html" width="100%" style="padding:0px; min-height:580px;"></iframe>
<div id="btn_father" style="border:1px solid #999;padding: 10px 50px;display: inline-block;cursor:pointer">打开console,点击后向子页面发送数据</div>
<script>
window.onload=function () {
var btn_father=document.getElementById('btn_father');
var cont_father=document.getElementById('cont_father');
var sendData={
text:'这是父页面的数据'
}
bind(btn_father,'click',function () {
window.frames[0].postMessage(JSON.stringify(sendData),'http://192.168.100.40:4200/page2/index.html');//数据发送
})
bind(window,'message',function(e) {
var e=window.event || arguments[0];
var data = JSON.parse(e.data);
console.log('我是父页面,这是子页面发送的数据:'+data);
console.log(data.text)
cont_father.innerHTML=data.text;
console.log('-------------------')
})
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent("on" + evname, function () {
fn.call(obj);
})
}
}
}
</script>
</body>
</html>
域名B下的页面
<!doctype html>
<html>
<head>
<title>Page_2</title>
<meta charset="utf-8">
</head>
<body style="background: #fff">
<h3>这是子页面</h3>
<div id="cont_child"></div>
<div id="btn_child" style="border:1px solid #eee;padding: 10px 50px;display: inline-block;cursor:pointer">打开控制台,并点击</div>
<script>
window.onload=function(){
var btn_child=document.getElementById("btn_child");
var cont_child=document.getElementById("cont_child");
var sendData={text:'我是iframe里面的数据'};
bind(btn_child,'click',function(){
window.parent.postMessage(JSON.stringify(sendData),'http://192.168.100.40:4100/page1/index.html');//数据发送
})
bind(window,'message',function(e) {
var e=window.event || arguments[0];
if(e.source!=window.parent) return;
var data = JSON.parse(e.data);
console.log('我是子页面,这是父页面发送的数据:'+data);
console.log(data.text)
cont_child.innerHTML=data.text;
console.log('------------------')
})
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent("on" + evname, function () {
fn.call(obj);
})
}
}
}
</script>
</body>
</html>
经测试,可以兼容ie8
最新文章
- 关于转换大写中文金额-新学的java函数整理
- js判断选择时间不能小于当前时间的代码
- HTTP协议分析及攻防方法
- SQL SERVER将某一列字段中的某个值替换为其他的值 分类: MSSQL 2014-11-05 13:11 67人阅读 评论(0) 收藏
- mac下的改装人生——第一次拆卸mbp,加入内存
- Android之声音管理器《AudioManager》的使用以及音量控制
- POJ 2502 Subway(迪杰斯特拉)
- MyEclipse java was started but returned exit code=-1
- libeXosip2(1) -- Modules
- Input file 文本框美化
- 封装TableView有可能用到的数据结构和UITableViewCell的一个继承类
- 常用SQL笔记总结
- Oracle中判断字段是否为数字
- centos6 下erlang安装
- [R]统计工具包
- 【拼接属性查询方式】MySql某一列属性值为拼接时的查询方式
- 查看是否存在tomcat进程和关闭方法
- 【PE结构】恶意代码数字签名验证
- 12款优秀jQuery Ajax分页插件和教程
- 【转】7Z命令行解压缩