0

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

<html>
   <frameset frameborder="1" rows="50%, *">
        <frame src="page1.html" />
        <frame src="page2.html"/>
    </frameset>
</html>

page1.html 代码

<html>
   <head>
      <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">
               <th>Result Details</th>
               <tr>
                  <td>Row 1</td>
                  <div id="r1">
                       <p> R1 data</p>
                  </div>
               </tr>
        </table>
    </body>
</html>

和Page2.html代码

<html>
   <body>
         <div id="myDiv">
              <p> Testing.... </p>
         </div>
    </body>
</html>

我的 JavaScript myjs.js

 $(document).ready(function () {
            $('table tr').on('click', function () {
                $('#r1').load('page2.html#myDiv');
        }); 
        });

使用此代码，单击表格行时，我可以在“r1”中显示“myDiv”内容。但我想要反向行为。即点击行时，page1的div“r1”的内容应该显示在page2的div“myDiv”中。我试过 $('page2.html#myDiv').html('#r1'); 但没有成功。有什么想法吗

4

1 回答 1

1

如果可能，将其更改frames为iframes. .contents()然后，您可以使用假设两个 iframe 位于同一域中的函数来访问每个 iframe 中的元素。

然后，您将执行以下操作。

main.html

<html>
    <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
      <script src="myjs.js"></script>
   </head>
    <iframe id="page_1" src="page1.html"></iframe>
    <iframe id="page_2" src="page2.html"></iframe>
</html>

page1.html

<html>
   <body>
         <table id="resultDetails">
               <th>Result Details</th>
               <tr>
                  <td>Row 1</td>
                  <div id="r1">
                       <p> R1 data</p>
                  </div>
               </tr>
        </table>
    </body>
</html>

page2.html

<html>
   <body>
         <div id="myDiv">
              <p> Testing.... </p>
         </div>
    </body>
</html>

myjs.js

$(window).on('load',function () {
    $('#page_1').contents().bind('click','tr', function () {
        $('#page_2').contents().find('#myDiv').html($('#page_1').contents().find('#r1').html())
    }); 
});
于 2013-09-02T07:57:37.583 回答