利用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 ...
随机推荐
- JAVASCRIPT数据类型（值类型-引用类型-类型总览）
值类型:也称为原始数据或原始值(primitive value). 这类值存储在栈(stack)中,栈是内存中一种特殊的数据结构,也称为线性表,栈按照后进先出的原则存储数据,先进入的数据被压入栈底,最 ...
- ztree--插件实现增删改查demo（完整版）
ztree--插件实现增删改查demo(完整版) var setting = { async: { enable: true, ...
- 1、linux软件包管理
linux软件包管理分为两种:RPM包管理和源码包管理,其中RPM包管理又有两种方式:①RPM命令管理,②YUM在线命令管理. RPM包依赖关系: 1.树形依赖 2.环形依赖 (用一条命令同时装来解决 ...
- python开发最受欢迎的十款工具
python开发最受欢迎的十款工具 dreamyla3个月前 今天小编给正在学习python开发的朋友介绍十款最受欢迎的开发工具,因为在学习python开发过程中少不了IDE或者代码编辑器,想要提高开 ...
- jvm的happens-before原则
提到并发,通常首先想到是锁,其实对共享资源的互斥操作是一方面,在Java中还有一方面是内存的可见性和顺序化,了解JMM的同学可能会更清楚些,内存可见性和顺序性同样非常重要,在这里简单提一下JMM模型, ...
- linux 下的mysql 连接报错
报错: Fri Jul 28 16:28:52 CST 2017 WARN: Establishing SSL connection without server’s identity verific ...
- Linux 登陆提示文字
/etc/issue是从本地登陆显示的信息 /etc/issue.net是从网络登陆显示的信息 /etc/motd内容由系统管理员确定,常用于通告信息,如计划关机时间的警告等 每次用户登录时,/etc ...
- win7下IIS的安装和配置图文教程
1. 首先是安装IIS.打开控制面板,找到”程序与功能”,点进去 2. 点击左侧”打开或关闭Windows功能” 3. 找到”Internet 信息服务”,按照下图打勾即可 等待安装完成 4. 安装完 ...
- css垂直居中方案
先介绍几种常见的垂直布局方式: 已知盒子具体宽度(宽度可以为百分比)(适用于居中浮动元素) 第一种: 给父元素相对定位,给子元素绝对定位 父布局 { position: relative; } 子布局 ...
- 平衡二叉树之RB树
RB树(红黑树)并不追求“完全平衡”——它只要求部分地达到平衡要求,降低了对旋转的要求,从而提高了性能.由于它的设计,任何不平衡都会在三次旋转之内解决.典型的用途是实现关联数组(如C++中的map和s ...