Question

so the code that extracts the div from the iframe is made by @Adil like this:

$(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…

Thanks in advance!

UPDATE:

i will explain more so i don’t get close vote what i’m doing is that i have a table in the iframes that i want only to get without any headers or anything so the code above is filtering that to give me exactly that div that contains the table from the iframe and then displays it. my problem is if i have more than one iframe then the table is duplicated from the first iframe with the same info and there’s no loop like foreach…

Answer 1

When you have more then one elements you can use each to iterate through them, try this.

<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 () {
     $('.test').each(function(){         

       var filteredContents1 = $(this).contents().find('.div_iframe').html();
       $(this).contents().find('body').html(filteredContents1);       

     });

 });