项目中需要和其他单位合作开发，方案采用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. 54Mbps、150Mbps、433Mbps 你知道这三个Wi-Fi速率怎么算的吗？

           802.11g能够提供54Mbps的最大速率, 802.11n和802.11ac单流分别能够提供150Mbps和433Mbps的最大速率,这些数字是怎么算的呢?(看红字,更容易理解哟) ...

  2. Mac Eclipse常用快捷键

    Option + Command + X: 运行 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + Option + ↓:复制 ...

  3. 《转》python 11 表达式和语句

    转自 http://www.cnblogs.com/BeginMan/p/3164600.html 一.Python语句 if语句.else语句.elif语句.条件表达式.while语句.for语句. ...

  4. mysql保存当前时间精确到秒

       用mybatis在mysql中保存字段精确到秒须要两个步骤. 1.如今mysql中将时间字段改为datetime 比如:alter table tablename add pay_date da ...

  5. oracle中的decode函数的使用

    含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译值1)ELSIF 条件=值2 THEN R ...

  6. Nginx安装及分流多个web服务

    Ngnix安装及常用配置 一.安装Nginx 1.检查依赖 yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib ...

  7. The linux command之环境

    一.环境 shell在环境中存储了两种数据类型:环境变量(environment variables )shell变量(shell variables).在shell中这两种变量基本没有什么不同. 此 ...

  8. redis笔记_源码_跳表skiplist

    参照:https://juejin.im/post/57fa935b0e3dd90057c50fbc#comment http://redisbook.com/preview/skiplist/dat ...

  9. SQL Server install

    { https://www.cnblogs.com/ios9/p/9527939.html https://www.cnblogs.com/ios9/p/9527815.html //在安装工具中 安 ...

  10. DDOS 单例

    DDOS.H #pragma once //g++ ../../../Main.cpp ../../../DDOS.cpp -lpthread #include <stdio.h> #in ...