The usage and precautions of IFRAME

Last Update:2017-02-28 Source: Internet

Author: User

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

Many comrades on the IFRAME is how to control, not very understanding, basically still in a vague state of understanding.

Note Two items , IFR is an ID and NAME value with the presence of an IFRAME:
document.getelementbyid ("IFR");
window.frames["IFR"];

To use a function within an IFRAME, a variable must go through the second method. Because it takes a complete DOM model (I don't know if that's right). The first method just pulls out an object.

If only want to change the src or border, scrolling and other attributes (and property is not a concept, property can not be written in the label, such as: scrollheight,innerhtml, etc.), You need to use the first method.

If you want to get the page of the IFRAME (not the IFRAME itself), you need to use the second method, because it gets a complete DOM model, such as the document.body content of the IFRAME, only the second way.

Also note that if you call the IFRAME's DOM model when the IFRAME's page is not fully loaded, you will have a very serious error, so you have to prepare a fault-tolerant mode.

The following is an example, one is aa.htm, one is bb.htm, please test to the local operation, the reason does not need me to say!

Aa.htm

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>untitled page</title>
<style type= "Text/css" >

</style>
<body>
<iframe id= "IFR" Name= "IFR" width= "100%" height= "src=" "bb.htm" ></iframe>
</body>
<script language= "javascript" type= "Text/javascript" >

var aa_value= "I ' m a variant in top window!";

var Ifr_id=document.getelementbyid ("IFR");
var ifr_window=window.frames["IFR"];

Alert ("Alert from top Window:can ' t get iframe" variant by ifr_id, it'll return: "+ Ifr_id.bb_var);
Alert ("Alert from top Window:can ' t get iframe ' DOM model by ifr_id, it'll return:" + Ifr_id.window);
Alert ("Alert from top window:get src from ID:" + ifr_id.src);
Alert ("Alert from top window:get href from window:" + ifr_window.document.location.href);

Since bb.htm may not be loaded yet, there is no possibility of an error being raised
Call functions within the IFRAME ifr_window.bb ();

Calling variables within an IFRAME
Alert ("Alert from top window:" + Ifr_window.bb_var);

//
Alert ("Alert from top Window:" + Ifr_window.document.body.innerHTML);

function AA (msg) {
Alert ("I ' m alerting from top window, and I received a msg:\n" + msg);
}
</script>

Bb.htm

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>sub frame</title>
<style type= "Text/css" >

</style>
<body>
I ' m a sub frame!
<br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
... <br/>
...
</body>
<script language= "javascript" type= "Text/javascript" >

var bb_var= "I ' m a variable in IFR";

function bb () {
Alert ("Alert from Iframe:i ' m frame IFR ' s function")
}

Get the variables of the parent page
Alert ("Alert from iframe parent.ifr_id::" + parent.ifr_id);
Alert ("Alert from iframe parent.aa_value:" + parent.aa_value);

Change the height of the IFRAME through the ifr_id of the parent page
Alert ("Alert from Iframe:ifr ' clientheight:" +document.body.clientheight);
Parent.ifr_id.height=document.body.clientheight;

Alert ("Alert from Iframe:ifr ' s scrollheight:" + document.body.scrollHeight);

Functions that call the parent form:
PARENT.AA ("I'll calling a function which is top window '");

Change the title of the parent form:
Alert ("Alert from iframe:i would changing top window ' title");
Top.document.title= "The title value changed";

Border and scrolling changed by the ifr_id of the parent form
Alert ("Alert from iframe:i'll change my border and scrolling:");
top.ifr_id.border=0;
Top.ifr_id.scrolling= "No";
</script>

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.

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

The usage and precautions of IFRAME

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support