This article is mainly about iframe usage and considerations:
Many comrades are not quite aware of how iframe is controlled, Basically still in a vague state of understanding.
Note Two items,ifr is a ID and NAME value with existing 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 you only want to change the iframe src or border , scrolling et attributes ( And property is not a concept, the 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 invoke the IFRAME's DOM model when the IFRAME's page is not fully loaded, you will have a very serious error, so you should prepare a fault tolerant mode.
The following is an example, one is aa.htm, the other is bb.htm, please test to the local running, why not I said it!
Aa.htm
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>untitled page</title> ; style type= "Text/css" > <!--body{margin:0px; }--> </style> </pead> <body> <iframe id= "IFR" Name= "IFR" width= "100%" height= "src=" bb.h TM "></iframe> </body> </ptml> <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")ow: "+ ifr_window.document.location.href); Since bb.htm may not be loaded yet, there is no possibility that the next error//call functions within the IFRAME ifr_window.bb (); Invoke variable alert within the IFRAME ("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>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Bb.htm
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title>sub frame</title> <sty Le type= "text/css" > <!--html,body{margin:0px; width:90%; }--> </style> </pead> <body> I ' m a sub frame! ... ... ... ... ... ... ... ... ... ... ... ... . .. ... ... ... ... ... ... ... ... ... ... ... ... . .. ... ... ... ... ... ... ... ... ... ... ... ... . .. ... </body> </ptml> <script language= "javascript" type= "Text/javascript" > var b B_var= "I ' m a variable in IFR"; function bb () {alert ("Alert from Iframe:i ' m Frame IFR ' s function ')}//Get the variable alert of the parent page ("Alert from iframe parent.ifr_id::" + parent.ifr_id); Alert ("Alert from iframe parent.aa_value:" + parent.aa_value); The ifr_id of the parent page changes the height of the IFRAME 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 invoke 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'll changing top window ' title"); Top.document.title= "The title value changed"; Border and scrolling alert ("Alert from iframe:i will changes my border and scrolling:") through the ifr_id of the parent form; top.ifr_id.border=0; Top.ifr_id.scrolling= "No"; </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
