How do I make an if statement using an element in an iframe?

Question

So, I'm trying to make it so that when an element (inside the iframe) becomes hidden (display: none), it would make the iframe have display none.

I've tried:

var iframe = $('.preloader').contents().find('*');

if((iframe).is(':hidden')) {
  $('.preloader').css('display','none');
}

and

if($('.preloader').contents().find('*').is(':hidden')) {
  $('.preloader').css('display','none');
}

These both do not work.

HTML

<iframe class="preloader" src="https://sorrycantsay.net/preloader"></iframe>

This may help:

Sounds like what you're trying to do would violate Same Origin Policy - unless your iframe is on the same domain as your parent site? If it's not, you're probably out of luck.. — brads3290, Mar 19 '19 at 08:26
@AlexanderYakushev | The preloader uses canvas which for some reason doesn't work. — Tigerrrrr, Mar 19 '19 at 15:57

score 1 · Accepted Answer · answered Mar 19 '19 at 10:01

1

The easiest way for me when working with iframes is using the postMessage method + the onmessage event. It enables easy communication between iframe and parent. Additional examples here: https://javascript.info/cross-window-communication#postmessage

answered Mar 19 '19 at 10:01

julifos

Can I have an example of how this would be done? I need to check if an element in the iframe is hidden, if so, make the iframe display as none – Tigerrrrr Mar 19 '19 at 16:05

1 Answers1