Question

我试图在复选框点击时将div标签显示到另一个框架集。

我的 index.html 文件是

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

左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>

右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>

然后我的js文件是

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

单击复选框时，我想将这些复选框值显示在另一个html中的页脚div

中

Answer 1

首先，子帧应具有相同的原点（相同的域）以便操作它们。

然后，通过parent获取父框架。

获取子框架（根据http://javascript.info/tutorial/frames-and-iframes）：

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

所以答案是

$().ready(function(){

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

修改：很抱歉发现问题已被修改。

Answer 2

每个框架都是一个不同的网站，有自己的JS变量副本，出于安全考虑，一个页面无法使用JS修改其他页面。例如，当您从左侧面板调用文档变量时，与从右侧面板调用的文档变量不同，并且与从index.html调用的文档变量不同

记住JS是在客户端执行的。

也许你必须使用两个div：

<强> 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>

如果你想使用框架，也许你必须使用PHP和ajax在服务器端进行更改

如何将输入值一帧显示到另一帧onclick？

2 个答案: