Father and son on the use of the iframe page simple pass another value

When a page uses a nested iframe, how you want the data passed to the parent page iframe sub-page, iframe that pointed to sub-pages of it is how to obtain it, or give the parent page data sub-pages to use, so how to get the parent page and sub-page data? The following made a simple demo case according to this situation:

Parent page is parentPage.html, sub-page is childPage.html.

1, a situation: the parent page for the incoming data sub-page (sub-page to the parent page by value)

Parent page:

// Get subpage incoming data 
 function getChildValue (obj) { 
   document.getElementById ( 'Texts') = the innerText. Obj; 
 }

Subpage:

// to the parent page transmitted data 
var TXT = 'I active sub-interface is passed to the parent Values interface' ; 
parent.GetChildValue (TXT); // the GetValue method of the parent interface is Js

2, Case 2: Data acquisition sub-page (page to subpages parent mass value) of the parent page

Parent page:

// to the incoming data sub-page 
function toChildValue () {
     var TXT = 'This is the parent to a page of data sub-pages' ;
     return TXT; 
}

Subpage:

// Get the data transmitted from the parent page 
var getParentVule = window.parent.toChildValue (); 
the console.log (getParentVule)

Pass specific data values according to their project requirements to modify, put the following two pages of complete code:

Parent page parentPage.htm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>父页面</title>
        <style type="text/css">
            .box{
                width: 600px;
                height: 400px;
                margin: 10px auto;
            }
            h3{
                font-size: 16px; 
            } 
            .Cont { 
                width : 100% ; 
            } 
            .cont H4 { 
                font-size : 14px ; 
            }             
            .cont #texts { 
                width : 100% ; 
                Line-height : 22px ; 
                font-size : 13px ; 
                Color : # 2E2D3C ; 
            } 
            
            iframes { 
                / * just hidden, but any course reserved DOM structure * /
                visibility : hidden ;   
            } 
        </ style > 
    </ head > 
    < body > 
        < div class = "Box" > 
            < H3 > which is the parent page </ H3 > 
            < div class = "CONT" > 
                < H4 > This is from the sub- incoming data page: </ h4 > 
                < div the above mentioned id = "Texts" > </ div > 
                < iframes. src = "childPage.html" width="1px"height = "1px" class = "myIframe" name = "myIframe" > </ iframes. > 
            </ div > 
        </ div > 
        
        
        < Script of the type = "text / JavaScript" > 
            // get incoming data sub-page 
            function getChildValue ( obj) { 
                document.getElementById ( ' Texts ' ) .innerText = obj; 
            } 
            
            // for incoming data sub-page 
            function toChildValue () {
                 var TXT =  'This is the parent page to a sub-page of data ';
                return txt;
            }
        </script>
    </body>
</html>

　Subpages childPage.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子页面</title>
        <style type="text/css">
            .box{
                width: 600px;
                height: 400px;
                margin: 10px auto;
            }
            h3{
                font-size: 16px; 
            } 
        </ Style > 
    </ head > 
    < body > 
        < div class = "Box" > 
            < H3 > This subpage is </ H3 > 
        </ div > 
        
        
        < Script type = "text / JavaScript" > 
            // to the parent data transfer page 
            var TXT =  ' I pass sub-interface active parent value to the value interface ' ; 
            parent.GetChildValue (TXT);// GetValue method Js is the parent interface 
            
            
            // get data from the parent page 
            var getParentVule = window.parent.toChildValue();
            console.log(getParentVule)
            
        </script>
    </body>
</html>

Father and son on the use of the iframe page simple pass another value

Guess you like