您的位置：首页 > Web前端 > HTML5

利用html5 postMessage接口跨域设置iframe大小

2017-02-25 22:44 453 查看

<!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]);

messageMessages 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.targetOriginThe 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.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航