iFrame properties don't get updated through JS DOM

Question

Hi,

Another noob question, this one is quite a mystery to me.

I'm trying to inject a JS code, and making use of iFrame for this.

Test url -> http://ultimateclassicmovies.com/horror/the-brain-that-wouldnt-die/

Here I initially created a hidden iFrame

and then i'm injecting into it a new JS code: document.getElementById('movie_loader').src = 'jwplayer.php?id=5');

and making it visible: document.getElementById('movie_loader').visibility = 'visible';

but nothing happens as you can see. both SRC and VISIBILIY props aren't updated.

The same happened when I used the DISPLAY property.

Any idea?

Answer 1

You're missing 'style'.

document.getElementById('movie_loader').style.visibility = 'visible';

or better, use "display" rather than "visibility (use display: none; to start):

 document.getElementById('movie_loader').style.display = 'block';

Answer 2

You have a syntax error on the first line with an extra ) on the end, and you need to add .style on the second line, like this:

document.getElementById('movie_loader').src = 'jwplayer.php?id=5';
document.getElementById('movie_loader').style.visibility = 'visible';

Styles on an element are stored as an object under .style, not as direct properties.

Though, once you fix this... it can't find that jwplayer.php file, it's a 404, so you need to adjust the path somehow...I'm not sure exactly where on your site it's located, but it's not found at: http://ultimateclassicmovies.com/horror/the-brain-that-wouldnt-die/jwplayer.php?id=5

Answer 3

many thanks for the answers ! problem solved