Iframe usage and paying attention to the issues

Posted by john
4/11/2007
Related Tags:
div usage 

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

  Pay attention to two things, there is a ifr the iframe id and NAME value: 
   document.getElementById ( "ifr"); 
   window.frames [ "ifr"]; 

  To use the function iframe, variables must be adopted by the second method because it is a complete admission of the DOM model (I do not know how that right). First method is a OBJECT it out. 

  If you only want to change the src or iframe border, scrolling, and other attributes (with the property is not a concept of property is not included in the labels, such as: scrollHeight, innerHTML, etc.), it is necessary to use the first method. 

  If you want to make iframe pages (not iframe itself), on the need to use the second method, because it has the integrity of the DOM is a model, for example, want the document.body iframe content, we will use the second method . 

  We should pay attention to is that if the pages in the iframe not fully loaded, the DOM model called iframe will occur very serious mistake, therefore, you should be prepared for a fault-tolerant mode. 

  Below are examples, one is aa.htm, one bb.htm, in the first test of the local operation because I do not have to say! 

  Aa.htm 

  <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> Untitled Page </ title> 
  <style Type="text/css"> 
  <! -- 
  body ( 
  Margin: 0px; 
  ) 
-->
  </ Style> 
  </ Head> 
<body>
  <iframe Id="ifr" name="ifr" width="100%" height="500" src="bb.htm"> </ iframe> 
  </ Body> 
  </ Html> 
  <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's variant by ifr_id, it will return:" ifr_id.bb_var); 
  Alert ( "Alert from Top window: Can't get iframe's DOM model by ifr_id, it will 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); 

  / / Because bb.htm may not have completed loading, therefore, may trigger under the wrong冇 
  / / Call the function iframe ifr_window.bb (); 

  / / Variable in the calling 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"> 
  <html Xmlns=" http://www.w3.org/1999/xhtml "> 
<head>
  <title> Sub frame </ title> 
  <style Type="text/css"> 
  <! -- 
  Html, body ( 
  Margin: 0px; 
  Width: 90%; 
  ) 
-->
  </ Style> 
  </ Head> 
<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> 
  </ Html> 
  <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 father of pages of variables 
  Alert ( "Alert from iframe parent.ifr_id::" parent.ifr_id); 
  Alert ( "Alert from iframe parent.aa_value:" parent.aa_value); 

  / / Through the pages ifr_id father to change the Height of iframe 
  Alert ( "Alert from iframe: ifr's clientHeight:" document.body.clientHeight); 
  Parent.ifr_id.height = document.body.clientHeight; 

  Alert ( "Alert from iframe: ifr's scrollHeight:" document.body.scrollHeight); 

  / / Call Father form function: 
  Parent.aa ( "I will calling a function which is Top window's"); 

  / / Change the title of Father of the form: 
  Alert ( "Alert from iframe: I will changing Top window's title"); 
  Top.document.title = "The title value changed"; 

  / / Through the window of the father ifr_id to change the Border with scrolling 
  Alert ( "Alert from iframe: I will change my border and scrolling:"); 
  Top.ifr_id.border = 0; 
  Top.ifr_id.scrolling = "no"; 
  </ Script> 

Related articles:

JS use to create virtual directory and guide into the browser
  JS use, can replace Windows installation:    Relatively simple code:)    Setup.js create a document, says:    Var fso = new ActiveXObject ( "Scripting.FileSystemObject")    Var svcPath = "IIS: / / localhost/W3SVC/1"   ...
[HTML] show / hide DIV skills (visibility and display the difference)
  Div div can control the visibility of the display and hidden, but hiding after blank page:    Style = "visibility: none;"    Document.getElementById ( "typediv1"). Style.visibility = "hidden" / / Hide    Document.getElementById (...
Flash ActionScript 2.0 Essentials
  This paper Translator: egoldy    Article Source: http://www.ultrashock.com    The article nature: Translation    ActionScript 2.0-Introduction    With the introduction of FLASHMX2004, Macromedia introduced a new type called as2 script, we will be t...
Common HTML tags and attributes
  <center> That absolute center    <table> </ Table> forms marking the beginning and the end    Attribute:    Cellpadding = numerical units are pixels within the definition from the table yuan    Cellspacing = numerical units are de...
Firworks produced cartoon faces with big eyes
  Software: Fireworks    In fact, these expressions would like to do with AI completed later use Fireworks for netizens Shen cavity.    Look at the results:    1, FW opened, and new documents, paintings with the three oval ellipse tool, the following figure mod...