利用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 ...
随机推荐
- zedgraph绘图(修改)
转自原文 zedgraph绘图(修改) 首先先下载 zedgraph.dll和zedgraph.web.DLL两个文件 添加项目并引用 首先添加一个用户控件 WebUserDrawGrap.ascx ...
- C# 在根据窗体中的表格数据生成word文档时出错
出错内容为:
- 用python3判断一个字符串 包含 中文
在python中一个汉字算一个字符,一个英文字母算一个字符 用 ord() 函数判断单个字符的unicode编码是否大于255即可. s = '我xx们的88工作和生rr活168' n = 0 for ...
- C++Primer笔记-----day05
=======================================================================day05======================== ...
- python调用函数
1.同一包内的调用 直接使用import 文件名 或者from 文件名 import 函数名 a.py def p(): print("abc") b.py from a impo ...
- 浅谈scheduler
- 遍历List集合时，删除数据的问题
一.问题描述 有时候,我们会遇到在遍历List集合的过程中删除数据的情况. 看着自己写的代码,感觉完全没有问题,但就是达不到预期的效果,这是为什么呢?下面我们来分析下 String str1 = ne ...
- IDEA快捷键【收藏】
Ctrl+Alt+L 格式化代码Ctrl+Shift+J 两行合成一行,删去不必要的空格匹配代码格式其他快捷键:[常规]Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 ...
- 获取崩溃时的调用栈和生成dump文件,然后自动重启
首先要说明的是: linux 下 比较方便可以得到 崩溃时的调用栈,win下 比较难办 1. linux 获取调用栈 代码奉上: #include <execinfo.h> //在头 ...
- go_常量与枚举
package main import ( "fmt" "math" ) //常量的数值可以作为各种类型使用 func consts(){ const file ...