Run JQuery in the context of another frame

Asked 12/2, 2009 at 0:25 Answered 9/1, 2012 at 9:28

The client I am working with has a frameset like so...

<frameset rows="100,*, 0">
  <frame name="theFrame" id="theFrame" src="blah.html" >
  <frame name="theSecondFrame" id="theSecondFrame" src="foo.html" >
  <frame name="importantFrame" id="importantFrame" src="myFrame.html" >
</frameset>

When a certain action takes place I need my frame (importantframe which is currently hidden) to mostly take over the page and block any interaction with the other frames. I'm planning on blocking interaction using the jquery block UI plugin.

The problem is I can't actually change the foo.html or blah.html files. So the JS code cannot live there. What I need to do is execute my jquery code in the context of those frames. So just to recap, I need my JQuery code to live in myFrame.html but execute in the context of the other frames. How can I do that? Hope that makes sense.

Thanks CDR

Alek answered 12/2, 2009 at 0:25 Comment(0)

The jQuery function, which you more commonly call with $, takes a second argument called context, which is "which DOM element of jQuery object should I do the search in". Most of the time you omit this argument, so the context defaults to the current HTML document. When your code is executing in the iframe, the document defaults to that iframe's document. But you can easily grab the document for one of the other frames.

For example, put this in myFrame.html, and this will remove all the h1 elements from the frame with blah.html in it. Notice the second argument to $, which is the expression that grabs the blah frame from within important frame:

<html>
  <head>
    <script type="text/javascript" src="/javascripts/jquery.js"></script>
    <script type="text/javascript">
      function doIt() {
        $('h1', window.parent.frames[0].document).remove()
      }
    </script>
  </head>
  <body>
    <h1>My Frame</h1>
    <a href="#" onclick="doIt()">Do It</a>
  </body>
</html>

Trella answered 20/2, 2009 at 15:30 Comment(2)

Good answer - I was about to ask a similar question! – Tercel 3/4, 2009 at 22:28

You can also write the window.parent.frames[0].document part as window.parent.theFrame.document, which is more verbose. – Lipcombe 7/9, 2010 at 9:38

Like pjb3 said, set the jQuery context. If you have nested frames, your code will look like this:

$('*',window.parent.frames[0].frames[0].document).size();

Or, better yet, make a shortcut:

targetFrame = window.parent.frames[0].frames[0].document;
$('*',targetFrame).size();

Indogermanic answered 22/9, 2009 at 23:27 Comment(0)

I'm not certain about the block plugin, but can't you get hold of the relevant frame and manipulate it using the "frame tree", something like this: (from within importantFrame.htm)

parent.theFrame.someProperty = someValue;

eg:

parent.theFrame.location.href='anotherPage.html';

From what I've been reading, you might need Jquery on the target page, but you could try something like:

parent.theFrame.block();

or maybe:

$('#theFrame').block();

Meara answered 14/2, 2009 at 0:45 Comment(0)

In versions of jQuery >=1.7 we cannot get events old way

Older versions (<1.7):

var events = $('#form').data('events');

1.7 and newer:

var events = $.fn.data($('#form'), 'events');

Bushelman answered 9/1, 2012 at 9:28 Comment(0)

Recommended topics

Hot tags