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

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

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

Share Improve this question edited Aug 27, 2015 at 10:17 Magicprog.fr 4,1004 gold badges28 silver badges35 bronze badges asked Aug 24, 2015 at 10:08 user4284509

5 Haven't really seen framesets since the nineties, are you sure that's what you want to use ? – adeneo Commented Aug 24, 2015 at 10:09
See stackoverflow./questions/7170582/…. This is deliberately hard for security reasons. – user5211736 Commented Aug 27, 2015 at 10:02

Add a ment |

3 Answers 3

Sorted by: Reset to default 6 +50

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;
 }

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.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to display the input value one frame to another frame onclick? - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)