altering contents inside iframe and remove unwanted elements

Question

I have a div

<div id="container">
<iframe id="survey" src="somepage"></iframe>
</div>

Now the page loads inside the iframe

I want to remove all the other items except a div inside the iframe

$("#container").html($("#survey .requiredDiv").html())

But this is not working

Is it possible to do such thing? What should be done?

Have you tried using `contents()` instead? `var frame = $('#survey').contents();` — Basit, Mar 01 '17 at 07:58
Have you read this ? http://stackoverflow.com/a/15556150/7599559 — Brent Boden, Mar 01 '17 at 07:59

Jai · Accepted Answer · 2017-03-01T08:09:12.757

Remember: The src of iframe should also have to be in the same domain. This is due to security reasons.

Yet you can use load/html such way:

$("#container").html(function(){
    // There could be multiple target elements, i guess you should loop and return the html
    var htm = '';
    $("#survey").contents().find(".requiredDiv").each(function(){
       htm += this;  
    });
    return htm;
});

using .load():

$("#container").load($("#survey").contents().find(".requiredDiv"));

altering contents inside iframe and remove unwanted elements

1 Answers1