Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Javascript:Exchanging data between a document in an iframe and a parent document.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 302
    Comment on it

    Hii,

    I am providing a very simple javascript code  by which we can access variables and invoke functions in the parent document and vice-versa.

    Please go through the given example below and understand the concept.I hope it will be useful.

    • CSS 

    *{ margin: 0;padding: 0px;box-sizing:border-box; }
    .clr:after{content: "";clear: both;display: block;}
    
    body{font-family: Arial;}
    iframe{width:768px;margin:0 auto;}
    div {width: 32.3%;float: left;margin:0 15px;}
    div h3{color: #202628;padding: 50px 0 20px 0;}
    div form{background-color:#3C3B37;border-radius: 5px;padding: 25px 15px 25px;float: left;}
     div form > p{color:#fff;line-height: 10px;line-height: 25px;}
     div form > input{border: 1px solid #fff;border-radius: 20px;padding: 15px;width: 350px;color: #9FAAAD;margin: 10px 0;float: left;}

     

    • Parent Html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="IFRAMECONCEPT.css">
        
    </head>
    <body>
    <header>
    <form id="parentForm">
        <input type="text"  id="changeName" value="">
    </form>    
    
    </header>
    <section><iframe src="IFRAME.html" width="50%" height="50%" id="iframe"></iframe>
    </section> 
    
    </body>
    </html>

     

    • Iframe html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="IFRAMECONCEPT.css">
    </head>
    <body>
        <form id="childForm" action="#">
        <input type="text" id="nameChange" name="display">
        <button type="submit" onclick="newText()">click to send data from child to parent</button>
        <button type="submit" onclick="newTextSecond()">click to send data from parent to child</button>
    
        </form>
    
        <script>
            function newText() {
                parent.document.getElementById('changeName').value = document.getElementById('nameChange').value;
            }
            function newTextSecond() {
                document.getElementById('childForm').display.value =  parent.document.forms['parentForm'].elements['changeName'].value;
            }
    
    </script>
    </body>
    </html>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: