Question

I have this code:

  $(document).keyup(function(e) { 
     if (e.keyCode == 27 && $('#dropdown-themes2').is(":visible")) {
       $('#dropdown-themes2').hide();
    }
    if (e.keyCode == 27 && $('#style-inner').is(":visible")) {
       $('#style-inner').hide("slide", { direction: "left" }, 100);
       $('#panel-opener').animate({left:"0"}, 100).css({'background-image':'url(img/gear.png)',
               'background-color':'#fff'}).attr('title','Open');
    }
  });

So on pressing ESC, one item should slide (close). Its working fine when i am inside parent. But when i click and work inside iframe, ESC isn’t working.
Now that has sense as i need somehow to access parent elements from inside iframe. So I tried with adding parent.document so the code would be:

  $(document).keyup(function(e) { 
     if (e.keyCode == 27 && $('#dropdown-themes2',parent.document).is(":visible")) {
      console.log('radi');
       $('#dropdown-themes2',parent.document).hide();
    }
    if (e.keyCode == 27 && $('#style-inner',parent.document).is(":visible")) {
       $('#style-inner',parent.document).hide("slide", { direction: "left" }, 100);
       $('#panel-opener',parent.document).animate({left:"0"}, 100).css({'background-image':'url(img/gear.png)',
               'background-color':'#fff'}).attr('title','Open');
    }
  });

But nothing. I am having hard time with iframes.

Answer 1

To answer my own question:

For example if i want to hide one element in parent document when clicking inside IFrame of id #displayframe, I did this:

 $('#displayframe').load(function(){
     var iframeRef = document.getElementById('displayframe');
     $(iframeRef).contents().click(function(){
                $(document, parent.window.document).contents().find('#style-inner').hide();
     });});