项目中需要和其他单位合作开发，方案采用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. Python匹马行天下之面向对象

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发“更快更好更强...” 面向过程编程最易被初学 ...

  2. <读书笔记>001-以解决问题为导向的python编程实践

    以解决问题为导向的python编程实践 0.第0章:计算机科学 思考:计算机科学是否为计算机编程的简称? 编程的困难点:1.同时做2件事(编程语言的语法.语义+利用其解决问题)  2.什么是好程序(解 ...

  3. IRP FLAGS

    IRP所有标识位的含义,是 _IRP . flags 这个成员 IRP_NOCACHE 0x00000001 //表示I/O请求从存储的媒介而不是高速缓存中读取数据 IRP_PAGING_IO 0x0 ...

  4. 现代软件工程HW2：结对编程-生成五则运算式-Core10组 [PB16110698+PB16120162]

    作业具体要求点 这里 Core组要求: 1.Calc() 这个Calc 函数接受字符串的输入(字符串里就是算术表达式,例如 “5*3.5”,“7/8 - 3/8 ”,“3 + 90 * 0.3”等等) ...

  5. SQL语句转换成MapReduce的基本原理

  6. [java]反转单项链表，用O(n)时间和O(1)空间

    链表数据结构 public class ListNode { public int val; public ListNode next; public ListNode(int x) { val = ...

  7. xml 单例类

    MD5JSON.h #pragma once #include "include/json/json.h" #include "include/md5/md5.h&quo ...

  8. 使用ProGuard混淆JAR包

    1.在Input/OutPut选项下面,add input 导入需要混淆的jar包2.点击add output,设置混淆后输出jar包的名字和路径.如下图:3.在下面的编辑区右边点击add增加要混淆的 ...

  9. （转）Android在子线程中更新Activity中UI的方法

    转:http://blog.sina.com.cn/s/blog_3fe961ae0100mvc5.html 在Android平台下,进行多线程编程时,经常需要在主线程之外的一个单独的线程中进行某些处 ...

  10. Spring - JUnit整合测试

    1.导包:test.jar - (依赖 aop.jar) 2.使用@RunWith注解创建spring容器 - @RunWith(SpringJUnit4ClassRunner.class) 3.使用 ...