<!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静态代码块

    static{ //代码 } 在加载类的时候,会执行静态代码块-->非静态代码块--->构造函数 http://www.cnblogs.com/panjun-Donet/archive/2 ...

  2. RocketMQ初探(二)之RocketMQ3.26版本搭建（含简单Demo测试案例）

    作为一名程序猿,要敢于直面各种现实,脾气要好,心态要棒,纵使Bug虐我千百遍,我待它如初恋,方法也有千万种,一条路不行,换条路走走,方向对了,只要前行,总会上了罗马的道. Apache4.x最新版本既 ...

  3. linux 常用查看设备命令(转)

    # uname -a # 查看内核/操作系统/CPU信息 # /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostname # 查看计算 ...

  4. WPF 动态创建 DataTemplate 及数据绑定

    WPF 动态创建 DataTemplate 及数据绑定 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-22 参考: star ...

  5. React文档总结

    元素渲染 更新元素渲染 计时器例子 function tick(){ const element = ( <div> <h1>Hello, World!</h1> ...

  6. bps、bit、byte的区别

    bps是速度单位,bit是大小单位,byte也是大小单位1bps=1bit每秒, 8bit=1byte 1 Byte = 8    bits1 KB   = 1024 Bytes1 MB   = 10 ...

  7. 大数据Hadoop生态圈：Pig和Hive

    前言 Pig最早是雅虎公司的一个基于Hadoop的并行处理架构,后来Yahoo将Pig捐献给Apache的一个项目,由Apache来负责维护,Pig是一个基于 Hadoop的大规模数据分析平台. Pi ...

  8. python 中的type

    1. type(object) -> the object's type 返回的是object的类型,即对象的类定义 例如:用元类动态生成子类metaclass = type(father)   ...

  9. Kibana（elasticsearch操作工具）的安装

    在安装完es集群的基础上 1.创建文件夹并赋权 # 使用root进行操作 mkdir -p /export/data/kibana mkdir -p /export/logs/kibana # 赋权给 ...

  10. C#创建COM组件

    本文详细阐述如何用C#创建COM组件,并能用VC6.0等调用. 附:本文适用任何VS系列工具. 在用C#创建COM组件时,一定要记住以下几点: 1.所要导出的类必须为公有: 2.所有属性.方法也必须为 ...