1

Maybe the title is a little misleading and question could be too, but I'm curious, how would one work with jQuery from an internal (same host/domain) iframe without re-linking to jQuery's source in iframe's loaded HTML.

Well, I'm able to access it with parent.jQuery();, but whenever I'm trying to manipulate elements with it, it works in parent frame not the current, active one.

Iframe is generated with ColorBox v.1.3.16.

Here is what I've tried so far, with no luck at all.. (this comes from within iframe):

jQuery = parent.jQuery;
jQuery(document).ready(function(){
    jQuery('#time-bar .slider', document).css({ 'background-color' : 'blue', 'left' : '-99%' });
});

I've used document as a parent selector here, but it doesn't work, and I have no idea what should be used there.

Thanks in advance!

EDIT:

Derived from T.J. Crowder:

parent.jQuery(function($) {
    var element = $("#time-bar", document);
    console.log(element);
});

console.log() returns an empty object, or actually, have no idea if it can be called an object: [].

Community
  • 1
  • 1
tomsseisums
  • 13,168
  • 19
  • 83
  • 145

2 Answers2

2

Barring other factors, your code passing in document to the jQuery() ($()) function as the context document should work.

Example:

HTML:

<script src="blah/blah/jquery.min.js"></script>
<iframe id='theframe' src='http://jsbin.com/ulehi4'>

iFrame HTML:

<input type='button' id='theButton' value='Click Me'>

iFrame JavaScript:

parent.jQuery(function($) {
  $("#theButton", document).click(function() {
    $("<p>Button clicked!</p>").appendTo(document.body);
  });
});

Live example

That said, though, if you use the same exact link to the jQuery file (perhaps from one of the CDNs it's in) in both the parent and the frame, there's very little overhead indeed. You can insert a script element in the iframe if you're not in control of the markup.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Huh, doesn't seem to work.. Any chance that it's a bug caused by `colorbox`? – tomsseisums May 11 '11 at 06:09
  • Huh, my bad, probably, but still confused with the result. Thanks anyways! Accepted. – tomsseisums May 11 '11 at 06:23
  • @Tom: Sorry, not quite following -- did you get the problem sorted out? From your question edit, it kind of seems like you haven't, but you accepted this answer, so... :-) The result you list (`[]`) in the edit suggests no element with the `id` "time-bar" in the iframe... – T.J. Crowder May 11 '11 at 06:56
  • @Tom: Good deal, sometimes people do (and I don't get that). Glad that helped! – T.J. Crowder May 11 '11 at 11:04
1

If I understand the question correctly - see: jQuery/JavaScript: accessing contents of an iframe

more importantly from there:

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};
Community
  • 1
  • 1
Adam Tuliper
  • 29,982
  • 4
  • 53
  • 71