项目中需要和其他单位合作开发，方案采用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. 创建一个学生表student，默认的表空间为users，字段自定，同时为表的各个字段分别添加合适的约束，然后测试约束的验证状态。

    create table student(id number(4) constraint prim_key primary key,name varchar(8) not null,sex varch ...

  2. sp_executeSql 用法 执行有参数的sql字符串 出现必须声明标量变量 "@XXX"。

    今天遇到了一个难题 就是把 一个拼接sql语句 的返回值 赋值给一个变量 经研究 要用sp_executeSql这个存储过程 据说是从sql 2005才开始有的 代码如下: declare @str ...

  3. HDU—4046 Panda （线段树）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=4046   题意:给出一个字符串,统计这个字符串任意区间中"wbw"出现的次数. 规定两 ...

  4. vs 查看IL

    vs--工具--外部工具--新增1 标题:随便填, 2 命令:C:\Program Files (x86)\Microsoft SDKs\Windows\v8.0A\bin\NETFX 4.0 Too ...

  5. Binary XML file line #23: Error inflating class android.widget.TextView

    分析一波,报错23行TextView的问题,但是检查了xml没有发现23行又TextView相关代码,就不应该继续纠结xml了,代码是通过R文件拿到xml资源的,你就应该怀疑是R文件的问题,R文件编译 ...

  6. Java 基础 - 如何重写equals()

    ref:https://www.cnblogs.com/TinyWalker/p/4834685.html -------------------- 编写equals方法的建议: 显示参数命名为oth ...

  7. Java基本语法.part02

    变量 变量的概念: 内存中的一个存储区域 该区域有自己的名称(变量名)和类型(数据类型) Java中每个变量必须先声明,后使用 该区域的数据可以在同一类型范围内不断变化 使用变量注意: 变量的作用域: ...

  8. Xadmin+layUi Net框架

    1.引用xadmin  layui 2.autofac+dapper+mvc 3.效果展示 4.github https://github.com/sulin888/LsProject 登录密码:Ad ...

  9. Windows便筏快捷键

    Ctrl + L:左对齐 Ctrl + E:居中对齐 Ctrl + R:右对齐 Ctrl + B:加粗 Ctrl + I:斜体 Ctrl + U:给文字添加下划线 Ctrl + T: 给文字添加删除线 ...

  10. H2数据库的基本使用

    文章目录 下载jar包 启动服务 下载jar包 下载h2-1.3.176.jar 这个包(部分服务版本不一致,请自行更换版本) 启动服务 从终端定位到刚才jar包下载的位置,比如我这里是Downloa ...