You are here
Cross-Domain Iframe Resize 跨域 iframe 高度自适应
THE PROBLEM
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.
REGISTER AN EVENT HANDLER FOR INCOMING EVENTS
Always verify the sender's identity using the origin property. Skipping this step enables cross-site scripting attacks.
<script type="text/javascript"> window.addEventListener("message", myListener, false); function myListener(event) { if (event.origin !== "https://remote-domain.com:8080") { return; } //do something } </script>
HOW TO RESIZE IFRAME
Document A - contain an iframe; and expects a message from document B.
<!doctype html> <html> <head> <title>Document A</title> <meta charset="utf-8"> </head> <body> <iframe src="https://remote-domain.com:8080/document-B.html" id="zino_iframe"></iframe> <script type="text/javascript"> var zino_resize = function (event) { if (event.origin !== "https://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>
Document B - post a message to document A. In our case the message is the iframe height.
<!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, "https://my-domain.com"); } } </script> </head> <body onload="iframe_resize();"> <h4>Document B</h4> <p>Cross-Domain Iframe</p> </body> </html>
BROWSER COMPATIBILITY
Chrome 1+, Firefox 6+, IE8+, Opera 9.5+, Safari 4+