<!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. ce

    一,什么是epel 如果既想获得 RHEL 的高质量.高性能.高可靠性,又需要方便易用(关键是免费)的软件包更新功能,那么 Fedora Project 推出的 EPEL(Extra Packages ...

  2. JS 对输入框文本正在输入中校验

    // keyup getInput.keyup(function(){ var a = parseInt(getPrice); var b = parseInt(getInput.val()); // ...

  3. 「小程序JAVA实战」springboot的后台搭建（31）

    转自:https://idig8.com/2018/08/29/xiaochengxujavashizhanspringbootdehoutaidajian31/ 根据下面的图,我们来建立下对应的sp ...

  4. mysql存储过程(procedure)

    #创建带参数的存储过程 delimiter // ),out p int) begin ; end // delimiter call pro_stu_name_pass(@n,@p); select ...

  5. 网页静态化—redis | freemarker

    1.   学习计划 1.商品详情页面展示,动态展示 jsp + redis 2.使用freemarker实现网页静态化 3.ActiveMq同步生成静态网页 两个方案对比,方案一依赖web容器,red ...

  6. Mono在Full AOT模式下的限制

    [Mono在Full AOT模式下的限制] 调试时遇到一个Mono运行时异常: ExecutionEngineException: Attempting to JIT compile method ' ...

  7. Python基础：函数的介绍及应用

    # 函数的定义 def firstFun(): print("----------------------") print("剑来") print(" ...

  8. unity3d 事件说明

    Unity3D中所有控制脚本的基类MonoBehaviour有一些虚函数用于绘制中事件的回调,也可以直接理解为事件函数,例如大家都很清楚的Start,Update等函数,以下做个总结.   Awake ...

  9. Red Hat Cluster Suite 组件 fencing FAQ

    说明 Red Hat Cluster实现HA的关键组件之一是fencing.没有设置fencing,虽然看上去也能够运行Cluster,但是一旦遇到故障切换就会出现异 常,所以深入理解fencing原 ...

  10. Python学习笔记_使用openpyxl操作Excel，在同一个文件里复制某一个sheet

    应用场景:定制一个Excel模板文件,其中定义了一个模板Sheet,以此模板文件里的模板sheet为样例,制作报表,里面有不止一个模板样例Sheet 一.软件环境: 1.OS:Win10 64位 2. ...