使用 jquery 访问 iframe 的 <table>

Question

我看过一些关于访问 iframe 中数据的文章，所以我在 iframe 中加载的页面中有一个这样的表：<table class="table">...</table>

所以我只想在那个 iframe 中显示这个表格，没有任何标题或其他 div 或任何东西

我怎样才能用 jQuery 做到这一点？

更新：

html 代码如下所示：我在<div> 中添加了表格

<div id="test">
<br>
<table class="table">
<thead>
<tr>
<th> ...... // and so on

所以，我只想在 iframe 中显示这个 div

阿迪尔的更新：

$(window).load(function () {
        var filteredContents = $('.test').contents().find('.div_iframe').html();
        $('.test').contents().find('body').html(filteredContents);
});

HTML 看起来像这样：

<iframe class="test" width="100%" height="100%" src="/message.html?msjId=268" style="height:100%;width:100%;">
<iframe class="test" width="100%" height="100%" src="/message.html?msjId=260" style="height:100%;width:100%;">

以及现在应该显示的表格，它们应该是两个不同的表格，但目前msjId 是同一个表格，但与第一个msjId 重复...

Answer 1

你必须使用 jquery load 方法而不是 ready。加载时确保加载 iFrame html。另一方面，ready 确保当前页面中的 html 元素准备就绪。

$(window).load(function () {  
      var filteredContents = $('#iframeId').contents().find('.table').html();
      $('#iframeId').contents().find('body').html(filteredContents);
});

根据 OP 请求更新。

当你有两个元素时，你可以使用 ids 而不是 class，请阅读 selectors

<iframe id="frame1" width="100%" height="100%" src="/message.html?msjId=268" style="height:100%;width:100%;">
<iframe id="frame2" width="100%" height="100%" src="/message.html?msjId=260" style="height:100%;width:100%;">

 $(window).load(function () {
     var filteredContents1 = $('#frame1').contents().find('.div_iframe').html();
     $('#frame1').contents().find('body').html(filteredContents1);

     var filteredContents2 = $('#frame2').contents().find('.div_iframe').html();
     $('#frame2').contents().find('body').html(filteredContents2);

 });

Answer 2

尝试以下方法：

$('iframe-id').contents().find('body').html($('.table').html());

但 iframe 页面必须与您的包含页面来自同一个域，否则您将收到权限被拒绝错误。