what is the jQuery / javascript context of a frame within an iframe?

Asked 27/1, 2010 at 21:21 Answered 28/1, 2010 at 18:42

Solved javascript jquery iframe frameset

Let me preface this with... I have referenced this question/answers and it seems to contain clues, but i'm still missing the whole picture

Run JQuery in the context of another frame

Essentially, the structure of the index page is this

<html>
<body>
  <div class="frames-wrap">
      <iframe id="this-iframe" src="location.php">

      </iframe>
  </div>
</body>
</html>

location.php then contains a frameset (ahem, not my idea...) that has two frames that are set up like so...

<frameset cols="350,*">
  <frame src="search.php" id="frame_search" name="search"/>
  <frame src="edit.php" id="frame_edit" name="edit" />
</frameset>

if i want to manipulate objects between the index page and these elements how would i go about this?

I keep thinking the context should be something similar to window.parent.frames[0].document... what else am i missing?

Steib answered 27/1, 2010 at 21:21 Comment(2)

also referenced this, but i'm too new to post more than one link #998486 – Steib 27/1, 2010 at 21:22

this question might help you: #251920 (shameless self-promotion as the question was originally asked by me) – Jihad 27/1, 2010 at 21:33

Preface: You wont be able to access the iframes contents unless it originates from the same domain.

To select elements in your iframe you could use a jQuery call like this

element = $("#this_iframe").contents().find("#frame_search")

The key is to use the contents() function. See Traversing/contents

Rennet answered 28/1, 2010 at 10:33 Comment(1)

ahh contents() is indeed awesome, i didn't realize the iframe support that provided... Thanks! – Steib 28/1, 2010 at 18:43

I think the link from technicolorenvy has the answer, but the selector has a lesser known second parameter where you can set the context.

Something like this:

var iframeDoc = document.getElementById('myIframe');
iframeDoc = (iframeDoc.contentWindow) ? iframeDoc.contentWindow : (iframeDoc.contentDocument.document) ? iframeDoc.contentDocument.document : iframeDoc.contentDocument;


// From the parent window
$('p', iframeDoc).html('Hello from parent');

http://docs.jquery.com/Core/jQuery#expressioncontext

Ventricose answered 27/1, 2010 at 21:30 Comment(0)

Preface: You wont be able to access the iframes contents unless it originates from the same domain.

To select elements in your iframe you could use a jQuery call like this

element = $("#this_iframe").contents().find("#frame_search")

The key is to use the contents() function. See Traversing/contents

Rennet answered 28/1, 2010 at 10:33 Comment(1)

ahh contents() is indeed awesome, i didn't realize the iframe support that provided... Thanks! – Steib 28/1, 2010 at 18:43

Giving your frames ids that are valid JavaScript identifiers would help, then you could use constructs such as window.top.this_iframe.frame_edit.document as your context.

Augend answered 27/1, 2010 at 22:15 Comment(1)

thanks for the feedback! however, this is bombing for me. the ids now have underscores rather than ndashes. if i use console.log to see what's happening "behind the scenes" it will return something if i log window.top.this_iframe.document OR if i log window.top.document.getElementById('this_iframe') so it appears that the frame_edit id is not being "seen". any ideas? – Steib 27/1, 2010 at 23:52

These were all helpful. I kept bombing when I was attempting to get past the iframe in the DOM. THis would appear to be from the fact i had code residing in the ready() method, but the frameset that was being called within the iframe was not loaded by the time that had $(document).ready() fired.

Thanks for all the great help and feedback!

Steib answered 28/1, 2010 at 18:42 Comment(0)

Recommended topics

Hot tags