I'm trying to understand another Stackoverflow answer ( cross-domain iframe resizer? ) that purports to solve how to resize an iframe
(hosted on a domain separate from the domain it's embedded in) according to its height. Wondering if anyone could answer my questions below.
THE SOLUTION:
Iframe:
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
The parent page which contains the iframe (and would like to know its height):
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
MY QUESTIONS:
In the function resizeCrossDomainIframe(id, other_domain) {
line, I'm not supposed to interchange "id" with the id
of the iframe
and "other_domain" with the domain name that the iframe is hosted on, right? They're only parameters that I specify later when I call the function.
Instead of using onload
within the iframe
tag, I wrote the equivalent in jQuery, which loads on the page that embeds the iframe:
$('#petition-embed').load(function() { resizeCrossDomainIframe('petition-embed','http://target.domain.com'); });
I added brackets around return:
if (event.origin !== other_domain) {return;} // only accept messages from the specified domain if (isNaN(event.data)) {return;} // only accept something which can be parsed as a number
Does that look right?
I needed to do something similar, and found this example that seems simpler: using postmessage to refresh iframe's parent document
Here is what I ended up with in the iframe:
window.onload = function() {
window.parent.postMessage(document.body.scrollHeight, 'http://targetdomain.com');
}
And in the receiving parent:
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt){
if (evt.origin === 'http://sendingdomain.com') {
console.log("got message: "+evt.data);
//Set the height on your iframe here
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.