Hide elements in iframe

Question

I have an iframe (same domain) and I'm hiding some elements I don't want to display from this iframe. Everything works, but when I click on a ul > li list and I select an item of this list, the hidden elements display back again.

The iframe don't change the ID of the hidden ítems or anything like that so I don't know why the hidden ítems display again.

The solution I have right now is a setInterval that keep the ítems hidden but It colapses the page after some minutes inactive in the page so I need another solution.

I tried something like detect a click function inside the iframe, but when I select a item of the list this function don't work more.

    $(function(){
        var f=$('#iframe')
        f.load(function(){ 
            f.contents().find("#____bl_k_dd").on('click', function(event) { 
                runAfterTimeout();
            });
        });
    });
    function runAfterTimeout() {
        setTimeout(function(){
            alert("hi its me");
            $('#iframe').contents().find('body').css("background", "green");
        },2000);
    };

I try to detect a click function on the element, it Works the first time, then it don't Works.

If I change the ID of the element to body it Works just sometimes so it's not a solution.

Answer 1

You can create a css file and add it to your iframe page

var $head = $("iframe").contents().find("head");                
$head.append($("<link/>", 
    { rel: "stylesheet", href: "file://path/to/style.css", type: "text/css" }));