利用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 ...
随机推荐
- python的disutils创建分发包
python中的distutils包主要用创建共享包,安装包,在平时安装python模块的时候,使用的命令如下: python setup.py install 其实以上代码就是distuitls包提 ...
- 网卡流量监控脚本 ( Shell )
#!/bin/bash # Traffic Monitor # author: Xiao Guaishou get_traffic_info(){ recv=`cat /proc/net/dev | ...
- Spring2.5那些事之基于AOP的方法级注解式日志配置
在日常开发中经常需要在代码中加入一些记录用户操作日志的log语句,比如谁在什么时间做了什么操作,等等. 把这些对于开发人员开说无关痛痒的代码写死在业务方法中实在不是一件很舒服的事情,于是AOP应运而生 ...
- sax解析xml文件，封装到对象中
创建User.java类 public class User { private String id; private String name; private String age; private ...
- java-tip-Collections.synchronized系列生成的容器
这个系列的容器,和Vector或者HashTable之流的差不多, 区别是: Vector和HashTable是在关键方法上加synchronized关键字 而 Collections.synchro ...
- SpringBoot29 登录逻辑、登录状态判断
1 知识点扫盲 浏览器和服务器之间时通过session来确定连接状态的,浏览器第一次请求时服务端会自动生成一个session,并将这个sessionId传回给浏览器,浏览器将这个sessionId存放 ...
- svn配置多仓库与权限控制
telnet: connect to address 47.106.115.228: Connection refused svn执行上下文错误由于目标计算机积极拒绝无法连接 标签: svn 2017 ...
- iOS中wkwebview加载本地html的要点
项目中有些页面,我采用了html页面开发,然后用wkwebview加载的设计.在加载过程中遇见了一些问题,在这里进行一些记载和讨论.如有不同意见欢迎进行评论沟通. 问题时候这样的: 在webview的 ...
- cs api测试
更新磁盘方案 http://192.168.150.16:8900/client/api?command=updateDiskOffering&id=199e3be4-2af1-47a3-9f ...
- Javascript 浅拷贝与深拷贝
在了解JS的浅拷贝与深拷贝之前,我们需要先知道什么是值传递与引用传递. 在JS中,基本类型值的拷贝是按值传递的,而引用类型值的拷贝则是按引用传递的.通过值传递的变量间不会有任何牵连,互相独立:但是引用 ...