How to display the input value one frame to another frame onclick?

Question

I tried to show the div tag to another frame set while checkbox click.

My index.html file is

<html>
    <head>
        <title></title>
    </head>
    <frameset cols="25%,75%">
        <frame src="left-panel.html"></frame>
        <frame src="right-panel.html"></frame>
    </framset>
</html>

left-panel.html

<html>
    <body>
        <script src="min.js"></script>
        <script src="file.js"></script>
        <input type="checkbox" value = "1" class="theClass">Click<h1>
        <input type="checkbox" value = "2" class="theClass">Click<h1>
         <input type="checkbox" value = "3" class="theClass">Click<h1>
  </body>
</html>

right-panel.html

<html>
    <body>
       <script src="min.js"></script>
       <script src="file.js"></script>
       <div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
    </body>
</html>

Then my js file is

$('.theClass').change(function(){
  ($('.theClass:checked').map(function(){ myfunction(this.value);   }).get())
});
function myfunction(ad)
{
   document.getElementById("footer").innerHTML = ad;
}

When click the checkbox I want to display these checkbox value into the footer div in another html

Haven't really seen framesets since the nineties, are you sure that's what you want to use ? — adeneo, Aug 24 '15 at 10:09
See http://stackoverflow.com/questions/7170582/passing-data-between-frames-with-javascript. This is deliberately hard for security reasons. — , Aug 27 '15 at 10:02

score 6 · Accepted Answer · answered Aug 27 '15 at 10:00

First define the names of the frames:

 <frameset cols="25%,75%">
     <frame name="left" src="left-panel.html"></frame>
     <frame name="right" src="right-panel.html"></frame>
 </framset>

And then in the javascript:

 function myfunction(ad) {
     top.left.document.getElementById("footer").innerHTML = ad;
 }

You can access only to parent:

 function myfunction(ad) {
     parent.left.document.getElementById("footer").innerHTML = ad;
 }

score 1 · Answer 2 · answered Aug 27 '15 at 10:11

First, the sub-frames should have the same origin(same domain) in order to manipulate them.

Then, get the parent frame by parent.

Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):

window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name

So the answer is

$().ready(function(){

$("#cli").hover(function () {
    parent.frames[1].$("#footer").css("visibility","visible");
      },
      function () {
          parent.frames[1].$("#footer").css("visibility","hidden");
      });
});

edit: sorry to find that the question is modified.

score 1 · Answer 3 · answered Aug 27 '15 at 12:40

Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html

Remember JS is executed in client side.

Maybe you must to use two divs:

your.css

#wrapper {
}
#left {
  float: left;
  width: 75%;
  background-color: #CCF;
}
#right {
  float: right;
  width: 25%;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

index.html

<html>
        <head>
            <title></title>
            <link rel="stylesheet" href="your.css">
            <script src="min.js"></script>
            <script src="file.js"></script>
        </head>
        <body>
        <div id="wrapper">
           <div id="left">
              <input type="checkbox" value = "1" class="theClass">Click<h1>
              <input type="checkbox" value = "2" class="theClass">Click<h1>
              <input type="checkbox" value = "3" class="theClass">Click<h1>
           </div>
           <div id="right">
              <div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
           </div>
           <div id="cleared"></div>
        </div>
        </body>
</html>

If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side

How to display the input value one frame to another frame onclick?

3 Answers3