For a project I was figuring out how I could access the JQuery object in an iframe.

Why?
Well, Jquery objects inside the iframe have more data about the contents in the iframe than the jquery outside the iframe.
For example; In the iframe I have a element with a data object.
This data object contains certain variables I need, these data objects are stored in the local jquery.

The JQuery outside the iframe doesn’t have the same data objects as the JQuery inside the frame.

Usually to access elements inside an iframe we do the following:

$("#iframe").contents()

The problem with this, is that it will just parse the dom inside the iframe as a new jquery object as we use it in our normal window.
This will not include the data objects we have inside the iframe.

 

How do we access the JQuery inside the iframe?

For starters, the JQuery object is stored inside the window, to access window data of an iframe we do this:

$("#iframe").contentWindow

If we look into this object, it contains all data of the window, in here we find “$”, which is the jquery object.

To access the data we added to the div we used, I will set a variable to access the JQuery inside the iframe window.

var fjq = $("#iframe").contentWindow.$;

In this way we can access the jquery as we usually do with “$”.

 

Now to access the data variable we need:

console.log(fjq("div").data("variable")); // variable value.

That was pretty easy wasn’t it?
Some JQuery libraries store functionality inside the data objects, for example: content-builder.js

To access the builder I had to do the following:

var fjq = $("#iframe").contentWindow.$;
var builder = fjq("div").data('contentbuilder");

and to access the function “html” of the content builder:

builder.html(); //returned clean html by the builder.

Took me a while to figure out, but I’ve managed to do it.
Hope it will help you out some day!