The iframe height must be adjusted based on the actual height of the sub-page. But what if the sub-page is not in the same domain? At this time, the script cannot get the height of the sub-page, and there is a JavaScript cross-domain problem. Using iframe to dynamically load page content on the page is a common method in Web development. Specify an iframe without a scroll bar in the parent page, and specify a page to load the property src. This way, when the parent page is accessed, the Child page can be automatically loaded. The iframe height must be adjusted based on the actual height of the Child page. If the iframe height is smaller than the actual height of the sub-page, the excess parts cannot be displayed. On the contrary, if the iframe height is too high, a large number of blank areas will appear on the page. We can set the iframe height through the attribute or CSS. When we are not sure about the height of the sub-page content, we can also dynamically specify the height through the script. But what if the subpage is not in the same domain? At this time, the script cannot get the height of the sub-page, and there is a JavaScript cross-origin problem!
As described in the topic, this article also describes available methods and asks if there are other methods available besides the methods listed below?
Setting the iframe height using attributes or CSS is not described here. First, let's take a look at how to set through the script.
The Code is as follows:
Function ChangeFrameHeight (id ){
Var count = 1;
(Function (){
Var frm = document. getElementById (id );
Var subWeb = document. frames? Document.frames[id).doc ument: frm. contentDocument;
If (subWeb! = Null ){
Var height = Math. max (subWeb. body. scrollHeight, subWeb.doc umentElement. scrollHeight );
Frm. height = height;
}
If (count <3 ){
Count = count + 1;
Window. setTimeout (arguments. callee, 2000 );
}
})();
}
Assume that the iframe sub-page and the parent page are both in the same domain. You can use this script to dynamically adjust the iframe height of the given id. To prevent the parent page from being loaded before the child page, this function will be re-executed every 2 seconds, three times in total. In extreme cases, the sub-page loading speed is slower than the parent page. You can adjust the execution times and time as appropriate.
The Code is as follows:
If you encounter cross-origin issues with sub-pages, you can use postMessage in HTML5, provided that the sub-page needs to actively send information to the parent page. Below is the subpage section:
The Code is as follows:
Got post?
Lots of stuff here which will be inside the iframe.
On the parent page, obtain the information transmitted from the Child page and adjust the iframe height.
The Code is as follows:
