Auto resize iFrame
Question
I've finally worked out the cross domain function for iframe. The problem I now have is the first page is quite long. When you click on a link within the iframe to a smaller page the iframe does not auto resize and you get a big gap at the bottom where the previous page height went too.
The code i'm using is the following:
Code which goes on the external domain:
<!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>
Code which goes on the main domain where the iframe is to be displayed:
<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');">
Does anyone have any ideas how to modify this, and if they can show what I would have to modify?
Thank you.
2 answers
solution1
0 2012-11-01 14:41:41
First and foremost, you have to ask yourself why you're using iframes. If you can accomplish this in another way (AJAX!), it's probably best. But, the only way I've seen this successful:
__________________
|A |
| ____________ |
| |B | |
| | | |
| | |C| | |
| |___________| |
|_________________|
Let's say A has a url of http://foo.com and B has a url of http://bar.com . No script in B can affect A. No script in A can affect the page in B. This is browser security protocol.
The only thing that A can do to B is affect the src to effectively change the page in the iframe. We can use this to our advantage.
Create a new iframe (C) inside B. C needs to come from the same server as A, so let's give it a url of http://foo.com/iframeheight.html . Put this at the bottom of iframe B (before the </body> on the iframe page):
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://foo.com/iframeheight.html#" + document.documentElement.scrollHeight);
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
document.body.appendChild(ifrm);
Because A and C have the same URL, the browser will allow them to affect each other. http://foo.com/iframeheight.html should contain a function to tell A to resize B:
window.top.getElementById('my_iframe').height = window.location.hash.substring(1);
solution2
0 2012-12-13 19:51:57
If you are loading into the iframe from a subdomain then this does the trick to avoid the 'Permission denied':
http://madskristensen.net/post/Iframe-cross-domain-JavaScript-calls.aspx
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.