项目中需要和其他单位合作开发，方案采用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

iframe跨域数据传递的更多相关文章

  1. html5跨域数据传递（postMessage）

    在html5中有个支持跨域传递的方法postMessage,可是实现iframe之间的数据传递! 代码如下:数据发送页面 <!DOCTYPE HTML> <html lang=&qu ...

  2. 利用location.hash+iframe跨域获取数据详解

    前言 如果看懂了前文利用window.name+iframe跨域获取数据,那么此文也就很好理解了.一样都是动态插入一个iframe,然后把iframe的src指向服务端地址,而服务端同样都是输出一段j ...

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

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

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

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

  5. ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...

  6. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  7. js iframe跨域访问

    1.什么是跨域? 2.前台解决跨域几种方法 2.1 动态创建script 2.2 使用document.domain 2.3使用HTML5新属性postMessage 2.4 利用iframe和loc ...

  8. 关于iframe跨域实践

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

  9. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

随机推荐

  1. bagging和boosting以及rand-forest

    bagging: 让该学习算法训练多轮,每轮的训练集由从初始的训练集中随机取出的n个训练样本组成,某个初始训练样本在某轮训练集中可以出现多次或根本不出现,训练之后可得到一个预测函数序列h_1,⋯ ⋯h ...

  2. 「LibreOJ NOI Round #2」签到游戏

    题目 瞎猜一下我们只要\(n\)次询问就能确定出\(\{A_i\}\)来 感受一下大概是询问的区间越长代价就越小,比如询问\([l,n]\)或\([1,r]\)的代价肯定不会超过\([l,r]\) 所 ...

  3. 买不到的数目 /// 结论公式 oj26316

    题目大意: 给定a b(这题题意不清 其实a b互质) 设变量x y(x>=0,y>=0),求 x*a+y*b=c 找到最大的不可能达到的c 如a=4 b=7 那么c=14 有这样一个定理 ...

  4. 随笔-ansible-3

    关于循环的一些事: 是否是因为模块的原因? item适用于copy,但不适用于yum.虽然出现了警告,但并不表示不能用.功能还是不受影响的. 在上例中,我们使用了yum.copy.service模块( ...

  5. 我写的界面，在ARM上跑

    这个...其实,我对ARM了解并不多,我顶多也就算是知道ARM怎么玩,EMMC干啥,MMU干啥,还有早期的叫法,比如那个NorFlash NandFlash ,然后也就没啥了. 然后写个裸机什么的,那 ...

  6. extern const 不能一起用

    转载至:https://www.cnblogs.com/herenzhiming/articles/5442893.html 常变量在定义的时候必须初始化,所以当你在a.cpp中定义extern co ...

  7. Maven + Springboot + redis 配置

    前言 刚进入到Java 开发的世界,对于小白Java的我来说,使用Maven + SpringBoot 的项目下启动redis: 第一步 本地安装Redis 服务 关于redis的教程链接 点击这里: ...

  8. jq的绑定动态元素

    在项目中经常会遇到需要在页面中插入动态元素的情况,比如页面中有一个按钮: <div id="btn">确定</div> 点击按钮时在body中插入一段div ...

  9. Hibernate之Inverse的用法

    在多的一端配置Inverse设置为true,来自动管理关系

  10. BZOJ 2957楼房重建

    传送门 线段树 //Twenty #include<cstdio> #include<cstdlib> #include<iostream> #include< ...