Home > Developer > JavaScript
One, the parent window invokes the iframe child window method
1, HTML syntax: <iframe name= "MyFrame" src= "child.html" ></iframe>
2, Parent window Call Child window: Myframe.window.functionname ();
3, sub-window products call the parent window: Parent.functionname ();
Simply put, a parent is added before a variable or function that is called in a child window. On line
4, the parent window page source code:
Copy Code as follows:
<script Type= "text/web Effects" >
function Say () {
Alert ("parent.html------>i ' m at Parent.html");
}
Function Callchild ()
{
//document.frames ("MyFrame"). F1 ();
Myframe.window.say ();
}
</script>
<body>
<input Type=button value= "invoke functions in Child.html say ()" Onclick= "Callchild ()" >
<iframe name= "MyFrame" src= "child.html" ></iframe>
</body>
& Lt;/html>
5, child window page:
Copy code code as follows:
<script type= "Text/javascript" >
function Say ()
{
Alert ("Child.html--->i ' m at Child.html");
}
function Callparent () {
Parent.say ();
}
</script>
<body>
<input Type=button value= "invoke say () function in parent.html" onclick= "Callparent ()" >
</body>
Two, the iframe parent window and the child window mutually calls the method
1, ie in the use of methods:
Parent window Call Child window: Iframe_id.iframe_document_object.object_attribute = Attribute_value
Example: onclick= "iframe_text.myh1.innertext= ' http://www.pint.com ';"
child window Call Parent window: Parent.parent_document_object.object_attribute = Attribute_value
Example: onclick= "parent.myh1.innertext= ' http://www.pint.com ';"
2, Firefox use methods:
Above in IE no problem, but under Firefox is not normal. Under Firefox, it should be the following calling method:
Parent window Call Child window: window.frames["iframe_id"].document.getelementbyid ("Iframe_document_object"). Object_attribute = Attribute_value
Example: window.frames["Iframe_text"].document.getelementbyid ("Myh1"). innerhtml= "Http://hi.111cn.net";
child window calls the parent window: Parent.document.getelementbyid ("Parent_document_object"). Object_attribute = Attribute_value
Example: Parent.document.getelementbyid ("Myh1"). innerHTML = "Http://111cn.net";
3, The complete example
Test.htm
Copy code code as follows:
<title> test Page </title>
<script src= "Prototype-1.4.0.js" ></script>
<script language= "JavaScript" >
Function Show ()
{
window.frames["Iframe_text"].document.getelementbyid ("Myh1"). innerHTML = "Http://hi.111cn.net";
}
</script>
<body>
<iframe height= "width=" src= "iframe_test.htm" name= "Iframe_text" ></iframe>
<form action= "" method= "POST" >
<input name= "haha" id= "haha" type= "text" maxlength= "" value= "haha"/>
<br/>
<textarea cols= "rows=" 5 "id=" Getattributemethod "></textarea>
<input type= "button" onclick= "Show ();" value= "Submit"/>
</form>
<H1 id= "Myh1" >d</body>
Frame_test.htm
Copies code code as follows:
<!doctype HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.or G/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type content=" text/html; charset=gb2312 "/>
<title> Untitled Document </ Title>
<script language= "javascript" >
function Show ()
{
Parent.document.ge Telementbyid ("Myh1"). innerHTML = Http://111cn.net;
}
</script>
<body>
<form action= "" method= "POST" >
<input name= "abc" id= "abc" type= "Text" maxlength= "" value= "abc"/>
<br/>
<textarea C ols= "rows=" id= "text" ></textarea>
<br/>
<input type= "button" value= "Submit" onclick= " Show (); " />
</form>
</body>
Test.htm inside Firefox to access the IFRAME must use name, cannot use ID, so change to Name= "Iframe_test". (http://chenling1018.blog.163.com/blog/static/1480254200811891041694/)
Third, how to dynamically change the SRC value of the IFRAME in C #, dynamically pointing to a Web page
1 If it is a JavaScript script
add an ID to the IFRAME such as <iframe id=frmlist ...
in script write
Frmlist.document.location=strnewurl
2) If it is a daemon
add an ID to the IFRAME plus runat=server such as <iframe id= Frmlist Runat=server ...
Write in program
Frmlist.attributes.add ("src", strnewurl);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
