0

我有 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()));
    });
});

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

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

4

2 回答 2

0

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

我还在这里找到了关于使用 JavaScript 进行帧间通信的有用文档。

于 2013-09-20T10:54:17.247 回答
0

给你的 FrameSet 和你的 Frame 一个 ID：

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

f2 现在是一个 jQuery 对象。

于 2013-09-13T07:12:35.140 回答