一、 postMessage

　　window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。

二、语法

　　otherWindow.postMessage(message, targetOrigin, [transfer]);

　　otherWindow：是接收对象的窗体引用，例如：子窗体(iframe)对父级窗体的引用 "window.parent" 或者其他Iframe的引用 “Window.frames +索引值(命名或数字)”

　　message：将要发送到其他 window的数据。在IE9以下的浏览器,message不支持JSON对象，必须是字符串类型

　　targetOrigin：通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。

　　transfer：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

三、应用子窗体和父窗体之间的通信

1. parent.html：添加有Iframe(childIframe.html) 页面，并监听message事件

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

    <style>

        iframe{

            border:none;

            width:100%;

        }

    </style>

</head>

<body>

    <h1>parent</h1>

    <iframe src="childiframe.html"></iframe>

    <script>

        window.addEventListener("message", function (message) {

            alert(JSON.stringify(message.data));

        });

    </script>

</body>

</html>

2. childIframe.html：直接向parent 发送一条消息

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title></title>

</head>

<body>

    <h1>childIframe</h1>

    <script>

        window.parent.postMessage({type:"open",url:"iframe.html"},"*");

    </script>

</body>

</html>

3. IE9-兼容问题：

　　IE9及以下的浏览器,message不支持JSON对象，必须是字符串类型。发送时将JSON转换为字符串

window.parent.postMessage(JSON.stringify({ type: "open", url: "iframe.html" }), "*");

　　IE9还是IE8 不兼容addEventListener和"message"监听方法和事件，兼容办法

//IE8,IE9兼容方法

if (window.attachEvent) {

    window.attachEvent('onmessage', function (message) {

        console.log(JSON.parse(message.data));

    });

} else {

    window.addEventListener('message', function (message) {

        console.log(JSON.parse(message.data));

    });

}

js Iframe与父级页面通信及IE9-兼容性的更多相关文章

  1. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  2. 如何实现iframe页面与父级页面js交互

    处理办法:1.同一域下,相同端口2.父级.子集页面上同时标记 document.domain = "xxx.com" 操作内部元素:1.jQuery使用 iframe.conten ...

  3. js 取父级 页面上的元素

    var bb=window.opener.frames["contentIframe"].document.all["my:费用类别"][0].value; / ...

  4. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  5. js之iframe父、子页面通信

    注意事项 一 . 页面加载顺序:一般先加载完父页面才会去加载子页面,所以:必须要确保在iframe加载完成后再进行操作,如果iframe还未加载完成就开始调用里面的方法或变量,会产生错误.判断ifra ...

  6. iframe及与页面之间的通信

    获取iframe对象 iframe元素本身是位于父级页面中的,所以你可以像一个普通元素一样的使用和操作它 代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级 ...

  7. JS 的子父级页面调用

    window.frames["iframevehquery"].add(); // 父页面调用嵌套子页面的js函数, iframevehquery 为 iframe 的name值, ...

  8. window.frames && iframe 跨页面通信

    1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...

  9. iframe调用父页面js函数 方法 元素

    在一个页面中添加iframe,但是有时需要与父页面进行通信,传递参数. 网上总结有以下方法: 一.iframe标签中   src属性传参 <iframe src="test.jsp?i ...

随机推荐

  1. spring-boot-starter-web排除自带的logback依赖

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  2. 一些常见的http状态码

    HTTP状态码是服务器和客户端之间交流信息的语言,下面列出一些常见的HTTP状态码. 1XX系列 指定客户端应相应的某些动作,代表请求已被接受,需要继续处理.由于在HTTP/1.0协议中没有定义任何1 ...

  3. oracle学习笔记（十七） PL/SQL高级应用

    PL/SQL高级应用 动态SQL 在PL/SQL中,不能直接执行DDL(create,alter,drop),得使用动态SQL,当然,除了DDL,动态SQL也可以执行DML(select,insert ...

  4. C# - VS2019通过重写pictureBox实现简单的桌面截图功能

    前言 通过创建客制化组件(继承pictureBox),新增属性和构造方法,实现屏幕截图时需要用到的功能点.再通过监控鼠标按下.移动和释放,来获取起始点区域.最后通过操作BMP图像,实现截图的新增.修改 ...

  5. Shell（三）：echo、printf、test命令

    一.echo 1.显示普通字符串: echo "today is a wonderful day" 这里的双引号可以省略. 2.显示转义字符: echo "\" ...

  6. 自定义栈Stack 和 队列Queue

    自定义栈 接口 package com.test.custom; public interface IStack<E> { E pop(); void push(E e); E peek( ...

  7. SAP MM 特殊库存之T库存初探

    SAP MM 特殊库存之T库存初探 笔者所在的A项目里,销售业务广泛启用了POD功能.VL02N对交货单做了发货过账后物权并没有转移,而是将自有E库存转为一个叫做在途库存的特殊库存里.等到货物到了客户 ...

  8. Kotlin介绍（非原创）

    文章大纲 一.Kotlin简介二.Kotlin相比Java优势三.Kotlin与Java混合使用四.参考文章   一.Kotlin简介 1. 什么是Kotlin 安卓和Java,前者是最受欢迎的移动开 ...

  9. Fundebug录屏插件更新至0.6.0

    摘要: 录屏插件的性能进一步优化,传输的数据体积大幅度减少. 录屏功能介绍 Fundebug提供专业的异常监控服务,当线上应用出现 BUG 的时候,我们可以第一时间报警,帮助开发者及时发现 BUG,提 ...

  10. mssql sqlserver 使用SSMS运行sql脚本的六种方法分享

    摘要: 下文讲述五种运行sql脚本的方法,如下所示: 实验环境:sql server 2008 R2 在一次会议讨论中,大家咨询我使用SSMS运行sql脚本的方法,下文我将依次举例讲述sql脚本的运行 ...