How to set iframe height adaptive available methods in cross-domain situations_javascript skills

Using iframe on a page to dynamically load page content is a common method in web development. Give an iframe without scroll bars in the parent page, and then specify a loadable page for the attribute src, so that when the parent page is accessed, the child page can be automatically loaded. The height of the iframe needs to be adjusted according to the actual height of the subpage. If the height of the iframe is less than the actual height of the subpage, the excess part cannot be displayed; on the contrary, if the height of the iframe is too high, a large amount of blank space will appear on the page. We can set the height of the iframe through attributes or CSS. When the height of the subpage content is not sure, it can also be dynamically specified through scripts. But what if the subpage is not in the same domain? At this time, the script has no way to obtain the height of the subpage, and there is a JavaScript cross-domain problem!

As mentioned in the title, while introducing the available methods, this article also asks everyone if there are other methods besides those listed below?

Setting the height of the iframe through attributes or CSS will not be introduced in detail here. First let's look at how to set it up via script.

Copy code The code is 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 the iframe subpage and the parent page are both in the same domain, this script can dynamically adjust the iframe height for a given id. In order to prevent the parent page from loading before the child page, this function will be re-executed every 2 seconds for a total of 3 times. In extreme cases, the loading speed of the subpage will be slower than that of the parent page, so the number of executions and time can be adjusted appropriately.

Copy code The code is as follows:

If you encounter cross-domain problems with sub-pages, you can use HTML5 postMessage to achieve this, but the premise is that the sub-page needs to actively send information to the parent page. The following is the sub-page part:

Copy the code The code is as follows:

Got post?

Lots of stuff here which will be inside the iframe.

< ;/html>

Get the information passed from the child page in the parent page, and then adjust the height of the iframe.

Copy code The code is as follows:

For information on how to use HTML5's postMessage() method, you can view this article http://dev.w3.org/html5/postmsg/#web-messaging

But in most cases, in an iframe In addition to the fact that the referenced subpage is not in the same domain as the parent page, we may not be able to perform any operations on the subpage at all, or the subpage does not provide the Corss-document messaging function at all. In this case, no information about the subpage can be obtained through the postMessage() method. Since there is no way to interact with the subpage, there is no way to know the document object of the subpage. It has never been possible to adjust the height attribute of the parent page iframe based on the actual height of the subpage.

Currently there is no other practical and effective way to deal with the above problems. By default, you can specify a relatively large height for the iframe. In this way, assuming that the content of the referenced subpage will not exceed the scope, there will be basically no problem in displaying the content except for leaving some blank space on the page.

Are there any other more effective solutions? expect!