<!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. 读《分布式一致性原理》zookeeper运维

    1.配置详解 1.1基本配置 基本参数包括clientPort,dataDir和tickTime 1.2高级配置 下面我们再来看看zookeeper中一些高级配置参数的配置实用 2.四字命令 我们曾经 ...

  2. SpringMVC关于json、xml自动转换的原理研究[附带源码分析]（使用JAXB转换XML）

    前言 SpringMVC是目前主流的Web MVC框架之一. 如果有同学对它不熟悉,那么请参考它的入门blog:http://www.cnblogs.com/fangjian0423/p/spring ...

  3. 使用ffmpeg合并视频文件的三种方法

    ffmpeg合并视频的方法有三种.国内大多数仅介绍了其中之一.于是觉得有必要翻译一下.其实在ffmpeg的 FAQ文档中有比较详细的说明. 使用concat协议进行视频文件的合并 这种方式的适用场景是 ...

  4. .NET 等宽、等高、等比例、固定宽高生成缩略图 类

    #region 根据原图片生成等比缩略图 /// <summary> /// 根据源图片生成缩略图 /// </summary> /// <param name=&quo ...

  5. canvas的性能优化

    canvas玩多了后,就会自动的要开始考虑性能问题了.怎么优化canvas的动画呢? [使用缓存] 使用缓存也就是用离屏canvas进行预渲染了,原理很简单,就是先绘制到一个离屏canvas中,然后再 ...

  6. MySQL Root密码丢失解决方法总结

    1. 检查my.cnf,看看有没有密码......靠这也算一条啊 2. 如果能够重启,首先使用–skip-grant-tables参数重启,然后改密码,再去掉–skip-grant-tables参数重 ...

  7. iOS/iPhone学习系列、代码教程

    part 1--入门: 1. xcode 版本下载 以及 iphone sdk 下载: 最新版本在此下载: http://developer.apple.com/devcenter/ios/index ...

  8. Delphi 三层框架开发 服务端开发

    采用Delphi7+SQL2008 一.创建数据库和表 CREATE TABLE [dbo].[tb_Department]( [FKey] [uniqueidentifier] NOT NULL, ...

  9. 201671010140. 2016-2017-2 《Java程序设计》java学习第十一周

     java学习第十一周     本周,进行了java集合方面的知识,在博客园的帮助下,我的课前预习更有条理性,重点明确,本周的课堂反应明显更好了,首先,梳理一下本周知识点.  Collection   ...

  10. 32. Longest Valid Parentheses （Stack； DP）

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...