1

I'm developing a application where I need to write HTML/JS into a iframe. I chose a iframe because I thought that this would have it's own namespace etc, so I would not get into conflicts regarding JS-variable names etc.

But now, I try to reference a div, by it's ID, from within JS in the iframe. In the frame I have a button, that calls a function:

function colorDiv(){
  $("#test").css("background-color","red");
};

In the parent, this works - no problem. (Of course, this is a basic test-scenario. I want to write a graph in this div with highcharts. This is not working, and I am trying to figure out why not.)

But in the iframe, this does zip. The div does not get colored. The function is called, there is no error - but there is also no color...

(It might help to tell that there is a div called 'test' in the parent as well. But that does not color, and if I count the number of 'div#test' in the function colorDiv, it returns 1... I also checked if jquery has been loaded, and it has...)

Regarding the first two answers, I was not clear enough, maybe: I'm trying to change the div within the iFrame. Not in the parent window, but from a script in the iframe to a div within the same iframe. That's why I find it so surprising that this is not working....

Can anybody shed some light on this? :)

regards,

Paul

1
  • Did you reference jquery from your iframe?
    – jerjer
    Feb 2, 2012 at 8:07

4 Answers 4

1

If i got topicstarter right - you should include jQuery libary again inside html-page which is used inside the iframe, so that you could use it for manipulations inside child document

0

Are you trying to call a DIV in the parent from within the iframe? You need to call the parent.$ instead:

parent.$("#test").css("background-color","red");
0
0

Try:

$('#test', top.document).css("background-color","red");

Or I do not understand your question?

1
  • clarified that I'm trying to change a div within the same iframe... So top.document will reference the parent of the iFrame, which is not what I want to change... Feb 2, 2012 at 8:10
0
function colorDiv(){
  window.opener.$("#test").css("background-color","red");
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.