JavaScript implements the input of the parent class in the IFRAME

Source: Internet
Author: User
Tags html page

Input for manipulating parent classes in IFRAME

Window.parent.document.getElementById (' Mark2 '). value=$ (' #rightPointer '). Val ();

Action in the parent window to select all the input boxes in the IFRAME:

$ (window.frames["Iframeson"].document). Find (": Text");

Action in the IFRAME selects all the input boxes in the parent window:

$ (window.parent.document). Find (": Text");

Action in IFRAME Select all radio buttons in the parent window

$ (window.parent.document). Find ("input[@type = ' Radio ']"). attr ("Checked", "true");

Example

The parent object gets the value of the child window

  code is as follows &nbs P;

//objectid is the window identity, ContentID is the element ID
function GetValue (objectid,con Tentid)
{
var Isie = (Navigator.appname = = ' Microsoft Internet Explorer ')
if (Isie)
{//if it is ie   alert (Document.frames (ObjectID). document.getElementById (ContentID). InnerHTML);   
}
Else
{ If it is FF
 alert (ObjectID). Contentdocument.getelementbyid (ContentID). InnerHTML);
InnerText is not supported under FF; The following is the workaround
//if (document.all) {
//alert (document.getElementById (' Div1 '). innertext);
//} else{
//alert ( document.getElementById (' Div1 '). textcontent);
//}
}    
}
 
Parent object to child window assignment

//objectid is window identity, ContentID is element ID
function SetValue (Objectid,contentid)
{
var Isie = (Navigator.appname = = ' Microsoft internET Explorer ')
if (Isie)
{//if ie  
Document.frames (ObjectID). document.getElementById ( ContentID). innerhtml= "I am under IE through the parent window to assign value over";
}
Else
{//if FF
 document.getelementbyid (ObjectID). Contentdocument.getelementbyid (ContentID) . innerhtml= "I am under FF assigned value through the parent window";     
}    
}

1. parent Window Child Window action
&NBSP

Value:
//parent window Fetch child window value
       GetValue ("Iframe1", "Iframediv");
&NBSP
Assignment:

//Parent window sets the value of the window element;
       SetValue ("Iframe1", "Iframediv");   

2. child window Operation parent window

Take value:

Alert (Window.parent.document.getElementById ("Iframediv"). InnerHTML);

Assign value:

Window.parent.document.getElementById ("Iframediv"). Innerhtml= "I am the value from the IFrame of the child window";

Examples of work useful

First, the child page in the IFRAME b.html to the outside parent page a.html the page to pass the value, then put the value of the A.html page computer on the b.html page, where the child page and the parent page are used to transfer values, call each other function of these functions, here I use a simple example to introduce these methods.

A.html

The code is as follows
[HTML] View plaincopy
<script language= "javascript" src= "Http://www.aspbc.com/js/jquery.js" type= "Text/javascript" ></script >
<script type= "Text/javascript" >
function f ()
{
$ (' #a '). Contents (). Find ("#bbb"). Val ("ddd");
}
function Fun ()
{
Alert (' function that pops up a page call ');
}
</script>
<div id= "Maindiv" >test</div>
Id= "A" name= "a" src= "b.html" width= "<iframe" height= "></iframe><br"
<input type= "button" value= "Assign value to subpage form" onclick= "f ()"/>

B.html

  code is as follows &nbs P;

<script language= "JavaScript src=" Http://www.aspbc.com/js/jqu Ery.js "type=" Text/javascript ></script>  
<script type= "Text/javascript" >  &NBSP
function f ()   
{  
    alert (' Start calling parent page function ');   
    $ (window.parent.fun ());   
    $ (window.parent.$ ("#maindiv"). HTML ("Values assigned by subpages");   
}  
</script>  
<form name= "Cform" >< Input type= "text" name= "B" id= "BBB"/><input name= "btn" type= "button" onclick= "F ()" value= "calls the parent function and assigns a value to the parent page element"/>& Lt;/form>
&NBSP;  
&NBSP;
Related Article

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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