Using an IFRAME on a page to dynamically load page content is a more common method of Web page development. Gives an IFRAME without a scrollbar in the parent page, and then assigns a loadable page to the attribute src so that when the parent page is accessed, the subpage can be loaded automatically. The height of the IFRAME needs to be adjusted based on the actual height of the child page. If the height of the IFRAME is less than the actual height of the subpage, the excess is not displayed; Conversely, if the IFRAME is too high, a large amount of white space appears on the page. We can set the height of the iframe by attributes or CSS, and can be dynamically specified by script when the height of the child page content is not determined. But what if the subpage is not in the same domain? This time the script has no way to get to the height of the child page, there is JavaScript cross-domain problem!
As the title explains, this article, while introducing the available methods, also asks you if there are other ways to find out, in addition to the methods listed below.
Setting the height of an iframe by attributes or CSS is not specifically described here. Let's start by looking at how to set up the script.
Copy Code code as follows:
function Changeframeheight (ID) {
var count = 1;
(function () {
var frm = document.getElementById (ID);
var subweb = Document.frames? Document.frames[id].document:frm.contentdocument;
if (subweb!= null) {
var height = Math.max (subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight);
Frm.height = height;
}
if (Count < 3) {
Count = count + 1;
Window.settimeout (Arguments.callee, 2000);
}
})();
}
Assuming that both the IFRAME and the parent pages are in the same domain, the script can dynamically adjust the height of the IFRAME for a given ID. To prevent the parent page from loading before the child page, the function is rerun every 2 seconds, executing 3 times altogether. In extreme cases, the loading speed of the page will be slower than the parent page, you can adjust the number of executions and the time appropriately.
Copy Code code as follows:
<iframe frameborder= "0" width= "450" marginheight= "0" marginwidth= "0" scrolling= "no" id= "Frm1" "Name=" Frm1 "src=" Abc.html "onload=" changeframeheight (' Frm1 ') "></iframe>
If you encounter a problem with a child page Cross-domain, you can do so by HTML5 's postmessage, but only if the child page needs to actively send information to the parent page. The following is the Sub-page section:
Copy Code code as follows:
<! DOCTYPE html>
<body onload= "Parent.postmessage (document.body.scrollHeight, ' http://target.domain.com ');" >
<p>lots of stuff here which'll be inside the iframe.</p>
</body>
In the parent page, get the information that the child page passes over, and then adjust the height of the iframe.
Copy Code code as follows:
<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 is 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= ' abc.html ' id= ' frm1 ' onload= ' resizecrossdomainiframe (' Frm1 ', ' http://example.com '); >
</iframe>
The PostMessage () method for how to use HTML5 can be viewed in this article http://dev.w3.org/html5/postmsg/#web-messaging
However, in most cases, the subpages referenced in the IFRAME, in addition to being outside the same domain as the parent page, may not be able to do anything to the child page at all, or the subpage does not provide corss-document messaging functionality at all. In this case, the PostMessage () method also fails to obtain any information about the child page. Because you cannot interact with subpages, there is no way to know the document object of the subpage, and never to adjust the height property of the parent page IFRAME based on the actual height of the child page.
There are no other practical and effective ways to deal with the problems encountered above. By default, the IFRAME can be assigned a larger height, so that the referenced child page content does not go out of range, except that there are some blank areas on the page, the content display is basically no problem.
Is there any other more effective solution? Expect!
