Home > Others

) IFRAME highly adaptive

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In actual project progress, IFRAME may have to be used in many places due to historical reasons, including currently popular application development.

The problem that IFRAME height is encountered in the actual use of IFRAME. Because the nested page length is not fixed, the displayed scroll bar not only affects the appearance, it will also cause inconvenience to user operations. Therefore, the automatic adjustment of the IFRAME height becomes the focus of this article.

Using JavaScript to control the height of IFRAME elements is the key to IFRAME highly adaptive. At the same time, because JavaScript controls permissions under different domain names, it leads to the same domain and cross-domain situations.

IFRAME highly adaptive in the same domain

The followingCodeCompatible with IE/Firefox browsers, controls the height of iframe with the ID "iframeid", retrieves the final height of the nested page through JavaScript, and then sets it on the home page.

The Code is as follows and can be copied. In addition, please note that this solution is only available for the same domain name.

<SCRIPT type = "text/JavaScript">

 Function setcwinheight (){

 VaR iframeid = Document. getelementbyid ("iframeid"); // IFRAME ID

 If (document. getelementbyid ){

  If (iframeid &&! Window. Opera ){

  If (iframeid. contentdocument & iframeid. contentdocument. Body. offsetheight ){

  Iframeid. Height = iframeid. contentdocument. Body. offsetheight;

  } Else if (iframeid. Document & iframeid. Document. Body. scrollheight ){

  Iframeid. Height = iframeid. Document. Body. scrollheight;

  }

  }

 }

 }

</SCRIPT>

<IFRAME width = "100%" id = "iframeid" onLoad = "javascript: setcwinheight ()" Height = "1" frameborder = "0" src = "Kimi. PHP "> </iframe>

Cross-origin IFRAME highly adaptive

When the home page and the nested IFRAME are different domain names, it is a little troublesome. You need to avoid cross-domain restrictions of JavaScript.

Principle: Fill (domain name is http://www.ccvita.com embedded iframe.html (domain name is: http://www.phpq.net fill (Domain Name: http://www.ccvita.com pull transmission height, through the criptset main.html IFRAME height. Ultimately achieve the expected goal.

Demo address: http://www.ccvita.com/wp-content/uploads/demo/iframe/main.html

Code download: http://www.ccvita.com/wp-content/uploads/demo/iframe/iframe.zip

Iframemain page main.html

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head> <title> IFRAME homepage </title>

<Body>

<Div style = "border: 1px solid # CCC; padding: 10px;">

<IFRAME id = "frame_content"Name = "frame_content" src = "iframe.html" width = "100%" Height = "0" scrolling = "no" frameborder = "0"> </iframe>

</Div>

<Br/> tail <br/>

</Body>

</Html>

Iframeembedded set page iframe.html

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head> <title> page nested by IFRAME </title>

<Body>

Text <br/>/>

Text <br/>/>

Text <br/>/>

Text <br/>/>

<IFRAME id = "iframec" name = "iframec" src = "" width = "0" Height = "0" style = "display: none;"> </iframe>

<SCRIPT type = "text/JavaScript">

Function sethash (){

  Hashh = document.doc umentelement. scrollheight;

  Urlc = "agent.html ";

  Document. getelementbyid ("iframec"). src = urlc + "#" + hashh;

}

Window. onload = sethash;

</SCRIPT>

</Body>

</Html>

Iframemediation page agent.html

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">

<Head> <title> IFRAME mediation page </title>

<Body>

<SCRIPT>

FunctionPseth (){

  VaR iobj = parent.parent.doc ument. getelementbyid ('frame _ content ');

  Iobloud = parent. Parent. Frames ["frame_content"]. Frames ["iframec"]. Location. Hash;

  Iobj. style. Height = iobloud. Split ("#") [1] + "PX ";

}

Pseth ();

</SCRIPT>

</Body>

</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
iframe host squarespace iframe highly recommended by mackeeper adaptive icons adaptive randomization iframe php page php iframe code

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More