How can I set iframe highly adaptive to achieve cross-origin?

Source: Internet
Author: User

Using iframe to dynamically load page content on pages 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.

 count = 1 frm = subWeb = document.frames ? (subWeb !=  height == (count < 3= count + 12000

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.

 

If you encounter cross-origin issues with sub-pages, you can use the HTML5PostMessageBut the premise is that the child page needs to actively send information to the parent page. Below is the subpage section:

  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.

                

About how to use HTML5PostMessage ()Method to view this article http://dev.w3.org/html5/postmsg/#web-messaging

However, in most cases, the child pages referenced in iframe are not in the same domain as the parent page, and we may not be able to perform any operations on the Child pages, or the sub-page does not provide the Corss-document messaging function at all. In this casePostMessage ()Method cannot obtain any information on the subpage. The document Object of the Child page cannot be known because it cannot interact with the child page. The height attribute of the iframe of the parent page cannot be adjusted based on the actual height of the Child page.

Currently, there are no other practical and effective methods to solve the above problems. By default, you can specify

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.