Question

我有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'）;但没有成功。任何想法

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

OnClick，将page1的div显示为page2

1 个答案: