Question

I have seen some articles about accessing the data inside the iframe,So i have in the page that is loading in the iframe a table like this: <table class="table">...</table>

so all i want to be displayed in that iframe is this table, without any headers or other divs or anything

How can i do this with jQuery ?

UPDATE:

the html code looks like this: i added the table inside a <div>

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

SO, all i want to be displayed in that iframe is this div

UPDATE for Adil:

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

HTML looks like this:

<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%;">

and the tables that should be displayed now, they should be two different tables, but at the moment is the same table for both msjId but duplicated from the first msjId…

Answer 1

You have to use jquery load method instead of ready. As load makes sure that the iFrame html is loaded. On the other hand ready makes sure the html elements in the current page are ready.

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

Update based on OP request.

When you have two elements you can use ids instead of class, Please read about 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);

 });