利用html5 postMessage接口跨域设置iframe大小
<!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大小的更多相关文章
- [转]html5: postMessage解决跨域和跨页面通信的问题
[转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...
- html5 postMessage解决跨域、跨窗口消息传递
一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...
- html5 postMessage解决跨域、跨窗口消息传递[转载]
原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...
- html5 postMessage解决跨域、跨窗口消息传递（转）
仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...
- Html5 postMessage实现跨域消息传递
一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...
- 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）
在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...
- 使用 html5 postMessage 实现跨域
英文原文 中文翻译 因为web的安全机制,浏览器的同源策略.在不同域之间做数据交换就会涉及到跨域.A域如果要实现向B域发关消息,多多少少要有对B域有一定控制权,最起码人家B域要接收你的消息啊. 最近发 ...
- html5: postMessage解决跨域通信的问题
效果图 postmessage解析 HTML5提供了新型机制PostMessage实现安全的跨源通信. 语法 otherWindow.postMessage(message, targetOrigin ...
- vue 音乐App QQ音乐搜索列表最新接口跨域设置
在 webpack.dev.config.js中 'use strict' const utils = require('./utils') const webpack = require('webp ...
随机推荐
- 大数据，物联网（Internet of Things），万物互联网（Internet of Everything），云计算，雾计算，边缘计算（Edge Computing） 的区别和联系
大数据是一种规模大到在获取.存储.管理.分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模.快速的数据流转.多样的数据类型,高价值性和准确性五大特征,即5V(Volume, V ...
- 03-24 Winform图表Chart
图表主要分为以下几个部分: 1.Annotations--图形注解集合, 2.ChartAreas--图表区域集合, 3.Legends--图例集合, 4.Series--图表序列集合(即图表数据对象 ...
- K2 Blackpearl中从数据库直接删除流程实例之K2Server表
转:http://www.cnblogs.com/dannyli/archive/2012/11/29/2794772.html /********************************** ...
- mongodb（五）
mongoDB 启动配置祥讲导出,导入,运行时备份Fsync锁,数据修复用户管理,安全认证 1.启动项 mongod --help 1.1利用config配置文件来启动数据库改变端口为8888 mon ...
- flutter container image FittedBox AspectRatio
当container指定了大小时,里面放入图片后,图片是居中自适应的,根据图片的大小,垂直居中或者水平居中.因为Image的默认自适应就是Contain, BoxFit.Contain 如果conta ...
- 聊聊flutter的UI布局
UI布局多半是套路,熟悉套路的规则. Flutter的UI布局也有一套规则 center center可以让任何元素在屏幕中居中,既是水平居中又是垂直居中,如果想让元素从上而下排列要怎么办呢?那就得使 ...
- sql 添加索引强大
以前没有亲自添加过索引,今天添加了一下,果真强大.几百倍的速度提升. SELECT * FROM tbl_sys_menu m WHERE m.SID in (SELECT mr.MENU_SID F ...
- Alpha混合
ShaderLab syntax: Blending 混合 Blending is used to make transparent objects. 混合是用来制作透明物体的. When graph ...
- solr 基本命令二（权重查找）
package zr.com.solr.utils; import java.io.IOException; import java.util.HashMap; import java.util.Li ...
- AM使用指南：如何在Managed Bean中获取AM实例？
AM是放置服务方法的地方,有时我们需要在Managed Bean中调用这些方法.要调用这些方法,首先要在Managed Bean中获取AM实例.这里要用到<ADF工具类:ADFUtil.java ...