码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-02-25 23:43:35      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:oct   ash   eve   att   except   nts   between   htm   end   

<!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大小

标签:oct   ash   eve   att   except   nts   between   htm   end   

原文地址:http://www.cnblogs.com/kzwrcom/p/6443172.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!