<!doctype html>

<html>

    <head>

        <title>Document A</title>

        <meta charset="utf-8">

    </head>

    <body>

        <iframe src="http://remote-domain.com:8080/document-B.html" id="zino_iframe"></iframe>

        <script type="text/javascript">

        var zino_resize = function (event) {

            if (event.origin !== "http://remote-domain.com:8080") {

                return;

            }

            var zino_iframe = document.getElementById('zino_iframe');

            if (zino_iframe) {

                zino_iframe.style.height = event.data + "px";

            }

        };

        if (window.addEventListener) {

            window.addEventListener("message", zino_resize, false);

        } else if (window.attachEvent) {

            window.attachEvent("onmessage", zino_resize);

        }

        </script>

    </body>

</html>

<!doctype html>

<html>

    <head>

        <title>Document B</title>

        <meta charset="utf-8">

        <script type="text/javascript">

        function iframe_resize(){

            var body = document.body,

            html = document.documentElement,

            height = Math.max(body.scrollHeight, body.offsetHeight,

	        html.clientHeight, html.scrollHeight, html.offsetHeight);

            if (parent.postMessage) {

                parent.postMessage(height, "http://my-domain.com");

            }

        }

        </script>

    </head>

    <body onload="iframe_resize();">

        <h4>Document B</h4>

	<p>Cross-Domain Iframe</p>

    </body>

</html>

Normally, documents on different pages are able to communicate between each other only if their domains, protocols and ports match up. HTML 5 specification comes with window.postMessage, which provides cross-domain communication between scripts.

Syntax

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

message
Messages can be nested objects and arrays, can contain JavaScript values (strings, numbers, Dates, etc), and can contain certain data objects such as File Blob, FileList, and ArrayBuffer objects.
targetOrigin
The value must be either asterisk *, slash / or absolute URL. Otherwise a SyntaxError exception will be throw. If you know the window location, you should always provide this specific location instead of just putting an asterisk *
transfer (Optional)
These objects are transferred with the message, and they are no longer usable on the sending side.

利用html5 postMessage接口跨域设置iframe大小的更多相关文章

  1. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  2. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  3. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

  4. html5 postMessage解决跨域、跨窗口消息传递（转）

    仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...

  5. Html5 postMessage实现跨域消息传递

    一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...

  6. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  7. 使用 html5 postMessage 实现跨域

    英文原文 中文翻译 因为web的安全机制,浏览器的同源策略.在不同域之间做数据交换就会涉及到跨域.A域如果要实现向B域发关消息,多多少少要有对B域有一定控制权,最起码人家B域要接收你的消息啊. 最近发 ...

  8. html5: postMessage解决跨域通信的问题

    效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...

  9. vue 音乐App QQ音乐搜索列表最新接口跨域设置

    在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...

随机推荐

  1. 【源码阅读】Java集合之一 - ArrayList源码深度解读

    Java 源码阅读的第一步是Collection框架源码,这也是面试基础中的基础: 针对Collection的源码阅读写一个系列的文章,从ArrayList开始第一篇. ---@pdai JDK版本 ...

  2. fatal error C1010: 在查找预编译头时遇到意外的文件结尾 (转)

    错误描述:fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "stdafx.h"”? 错误分析:     此错误发生 ...

  3. a different object with the same identifier value was already associated with the session解决方案

    org.springframework.orm.hibernate3.HibernateSystemException: a different ]; nested exception ] at or ...

  4. centos7 yum 安装jq

    一.简介 EPEL是企业版 Linux 附加软件包的简称,EPEL是一个由Fedora特别兴趣小组创建.维护并管理的,针对 红帽企业版 linux(RHEL)及其衍生发行版(比如 CentOS.Sci ...

  5. Linux实战教学笔记27：Nginx详细讲解

    前言:nginx的特点 本节主要对Nginx Web服务软件进行介绍,涉及Nginx的基础,特性,配置部署,优化,以及企业中的日常运维管理和应用.作为HTTP服务软件的后起之秀,Nginx与它的老大哥 ...

  6. AddComponentMenu

    [AddComponentMenu] The AddComponentMenu attribute allows you to place a script anywhere in the " ...

  7. NSArray 快速求和、平均值、最大值、最小值

    在iOS开发中我们经常遇到一个需求,求一个数组的所有元素的和,最大值,最小值或者平均值,有的开发者可能第一想到的是for循环遍历求解,其实苹果提供了更简便的方式.如下: NSArray *arr = ...

  8. Java线程同步的方法

    如果向一个变量写值,而这个变量接下来可能会被另一个线程所读取,或者从一个变量读值,而它的值可能是前面由另一个线程写入的,此时就必须使用同步. sychronized Java语言的关键字,当它用来修饰 ...

  9. It's not too late to start!

    It's not too late to start! 以此鼓励,希望能坚持下去,一个半路自学PHP的准PHPer!

  10. Python将阿拉伯数字转化为中文大写-乾颐堂

    利用Python将阿拉伯数字转化为中文大写,其实最麻烦的地方就是中间空多个0的问题,这种情况下,采用拆分法则,将一个大数字,先拆分成整数部分和小数部分,再对整数部分按照仟.万.亿.兆分位拆分为四个字符 ...