Question

我有3个html页面。 main.html，page1.html和page2.html。我使用以下代码在main.html中显示page1.html和page2.html。

<!DOCTYPE html>
<html>
   <frameset frameborder="1" rows="50%, *">
        <frame name="f1" src="Page1.html" />
        <frame name="f2" src="Page2.html"/>
    </frameset>
</html>

page1.html代码

    <!DOCTYPE html>
<html>
   <head>
      <style>
             .content {display:none;}
      </style>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="myjs.js"></script>
   </head>
   <body>
         <table id="resultDetails" border="1">
               <th>Result Details</th>
               <tr>
                  <td>
                  Click on me to see more details in other page
                  <div class="content">
                       <p> R1 data</p>
                  </div>
                  </td>

               </tr>
        </table>
    </body>
</html>

和Page2.html代码

<!DOCTYPE html>
<html>
   <body>
         <div id="myDiv">

         </div>

         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="myjs.js"></script>
    </body>
</html>

我的JavaScript myjs.js

 $(document).ready(function () {
    $('table').on('click', 'tr', function () {
       var doc =window.top.frames['f2'].document;
       var divElmnt = $(doc.getElementById('myDiv'));

       $(divElmnt.html($(this).find('.content').html()));
    });
});

使用此代码，在点击表格行时，我可以在第2页的“mydiv”div中显示div“content”内容。

这适用于IE和FF但不适用于Chrome。错误：doc未定义。对于chrome，window.top.frames ['f2']的等价物是什么。

Answer 1

为你的FrameSet和你的Frame提供一个ID：

var $fs = $("#fs");
var f2 = $fs.find("#f2");

f2现在是一个jQuery对象。

Answer 2

问题在于本地文件的Chrome安全标记，即file：///。在使用“--allow-file-access-from-files”标志选项启动Chrome后，top.frames正常工作。

我还发现了一个关于使用JavaScript here的帧间通信的有用文档。

top.frames不适用于chrome

2 个答案: