<!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. Linux虚机密码破解

    1 重启机器,在机器读秒时按回车键 2 选择要启动的操作系统按 e 3 选择kernel所在行按 e 4 末尾输入空格  single 5 敲回车 在按 b 系统将进入单用户模式 然后 可以 通过 p ...

  2. 出现The folder is already a source folder

    右键build path -> configure build path -> source ,选择 src/main/java.src/test/java删除,然后再新建.

  3. spring源码解析之AOP原理

    一.准备工作 在这里我先简单记录下如何实现一个aop: AOP:[动态代理] 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式: 1.导入aop模块:Spring AOP:(s ...

  4. win7+jdk环境变量配置

    进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是: ...

  5. 使用net.sf.fjep.fatjar插件将第三方JAR包打包进自已的JAR包中

    一般单个工程,在没有应用别人的jar包时导出为jar很简单,只要设置一个Main-Class就行了,也就是选择程序入口(main所在类).但是涉及到了数据库或需要用到第三方的JAR,就需要用到相应的数 ...

  6. OC中数组排序总结

    过完节回来,感觉很多东西都生疏了.总结一下数组的排序.应该不会太完美,后续添加补充. OC中的数组排序方法其实不太多,要根据不同的使用场景来使用不同的方法.Foundation框架中一般用到一下几个方 ...

  7. OceanBase

    OceanBase 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! OceanBase是一个支持海量数据的高性能分布式数据库系统,实现了 数千亿条记录.数百TB数据上的 ...

  8. linux系统启动过程及运行等级详解

    一.启动过程 1. 开机流程简述 1)加载BIOS硬件信息,并获取第一个启动设备的代号 2)读取第一个启动设备的MBR的引导加载程序的启动信息 3)加载核心操作系统的核心信息,核心开始解压缩,并且尝试 ...

  9. word 标题序号

    设置标题的序号. 1>设置二级标题的序号  步骤一: 步骤二: 步骤三: 步骤四: 2>设置三级标题的序号 程序员的基础教程:菜鸟程序员

  10. WIFI配置专项测试

    1. 测试项目 A. 路由器加密方式测试: B. 路由器信道选择测试: C. DHCP过期时间测试 D. 路由器WIFI密码复杂度测试: 2. 测试结果 2.1. 加密方式测试 路由器密码为简单,其他 ...