项目中需要和其他单位合作开发，方案采用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. 2D转换中的translate里调用matrix()的用法

    一开始,经常看到大佬们用matrix的方法,当时完全不会,不知道如何写.到后面,发现都是这样用,导致只能去认真看一下这个东西怎么用,要不然完全跟不上的节奏啊.因此建议大家去看下这篇文章,写的挺不错的, ...

  2. javascript和jQuery知识点总结

    attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

  3. Java 并发工具包——ExecutorService常用线程池

    1. 执行器服务 ExecutorService java.util.concurrent.ExecutorService 接口表示一个异步执行机制,使我们能够在后台执行任务.因此一个 Executo ...

  4. Java：关于main方法的10道面试题

    感觉假期过得好快,东西也丢得快. 假期吃喝玩乐之余也来温故一下Java知识,下面给大家整理了10道Java main方法的经典面试题,都来挑战一下自己的Java基础知识吧! 1.main方法是做什么用 ...

  5. JVM基本知识总结

    大概两三个月之前阅读了<深入理解Java虚拟机>(周志明著),也为了加深印象,这里简单的做下总结,想完整点了解JVM知识的也可以阅读本书,书写的不错,相当通俗易懂. 第一部分 内存管理机制 ...

  6. Activiti学习笔记7 — ReceiveTask机器自动任务的使用

    一. 创建流程规则,如下图 二.发布流程 /** * 2.发布一个流程 */ @Test public void testDeployProcess() { RepositoryService rep ...

  7. 搭建HDFS HA

    搭建HDFS HA 1.服务器角色规划 hd-01(192.168.1.99) hd-02 (192.168.1.100) hd-03 (192.168.1.101) NameNode NameNod ...

  8. 我也可以独立（引用JS外部文件）

    我也可以独立(引用JS外部文件) 通过前面知识学习,我们知道使用<script>标签在HTML文件中添加JavaScript代码,如图: JavaScript代码只能写在HTML文件中吗? ...

  9. python库之xgboost

    一.安装 https://www.zhihu.com/question/46377605

  10. USACO18FEB Platinum

    SlingShot 求数轴上从x到y的最短路( 边长为1),有若干个从xi到yi长度为ti的传送门,每次只能选择其中一个使用. 即求min(|x-y|,min{|a-x|+|b-y|+c}),拆开绝对 ...