Selecting an element in iframe with jQuery

Question

In our application, we parse a web page and load it into another page in an iframe. All the elements in that loaded page have their token IDs. I need to select the elements by those token IDs. Means - I click on an element on the main page and select corresponding element in the page in the iframe. With the help of jQuery I'm doing it in the following way:

function selectElement(token) {
     $('[tokenid=' + token + ']').addClass('border'); 
}

However with this function I can select the elements in the current page only, not in the iFrame. Could anybody tell me how can I select the elements in the loaded iFrame?

Thanks.

if anyone need to Access elements of parent window from iframe, see https://stackoverflow.com/questions/7027799/access-elements-of-parent-window-from-iframe — yu yang Jian, Feb 08 '22 at 06:58

Darin Dimitrov · Accepted Answer · 2011-06-11T16:17:58.390

184

var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');

Also note that if the src of this iframe is pointing to a different domain, due to security reasons, you will not be able to access the contents of this iframe in javascript.

edited Jun 11 '11 at 16:17

answered Jun 11 '11 at 16:07

Darin Dimitrov

1,023,142
271
3,287
2,928

8

Keep in mind $('iframe') doesn't directly return the iframe. You need to pull it out of the array. – McKayla Jun 11 '11 at 16:10
1

Thanks for the willingness to help. But this doesn't seem to work. – cycero Jun 11 '11 at 16:14
3

@cycero, it should work. Are you generating this iframe dynamically? Don't forget that if you point the src element of this iframe to another domain than your due to security reasons you cannot access its contents. – Darin Dimitrov Jun 11 '11 at 16:17
I load it not from a different domain but from the same folder. The iFrame contents are being generated dynamically and stored as a file on the server. Then that file is being loaded in iFrame. – cycero Jun 11 '11 at 16:19
@cycero, I've updated my answer. Try passing `iframe.contents()` – Darin Dimitrov Jun 11 '11 at 16:23
`$('iframe')` works when I enter this through console, but at debug and at normal execution `$('iframe')` return nothing... – Vitaly Zdanevich Nov 11 '15 at 05:40
Oh I found the problem - my script was FROM iframe so I can use usual selectors for iframe. – Vitaly Zdanevich Nov 11 '15 at 05:48

score 60 · Answer 2 · edited May 23 '17 at 12:10

60

Take a look at this post: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html

$("#iframeID").contents().find("[tokenid=" + token + "]").html();

Place your selector in the find method.

This may not be possible however if the iframe is not coming from your server. Other posts talk about permission denied errors.

jQuery/JavaScript: accessing contents of an iframe

edited May 23 '17 at 12:10

Community

1
1

answered Jun 11 '11 at 16:18

Kevin Bowersox

93,289
19
159
189

1

That works in terms of getting the HTML of the element, but how can I add a CSS class to that selected element? $("#iframeDiv").contents().find("[tokenid=" + token + "]").addClass("border"); doesn't seem to work. – cycero Jun 11 '11 at 16:37
1

Do you get any permission denied errors? Can you give me the html of the iframe? – Kevin Bowersox Jun 11 '11 at 16:43
Nope, no permission denied issues. – cycero Jun 11 '11 at 17:07

Fareed Alnamrouti · Answer 3 · 2014-01-05T09:42:30.063

24

when your document is ready that doesn't mean that your iframe is ready too,
so you should listen to the iframe load event then access your contents:

$(function() {
    $("#my-iframe").bind("load",function(){
        $(this).contents().find("[tokenid=" + token + "]").html();
    });
});

edited Jan 05 '14 at 09:42

answered Jun 14 '13 at 22:53

Fareed Alnamrouti

30,771
4
85
76

score -6 · Answer 4 · answered Jun 22 '18 at 11:51

-6

If the case is accessing the IFrame via console, e. g. Chrome Dev Tools then you can just select the context of DOM requests via dropdown (see the picture).

answered Jun 22 '18 at 11:51

tibersky

39
4

score -10 · Answer 5 · edited Oct 04 '13 at 07:51

-10

here is simple JQuery to do this to make div draggable with in only container :

$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );

edited Oct 04 '13 at 07:51

Pranav Singh

17,079
30
77
104

answered Oct 04 '13 at 07:29

Rajasekharreddy Kadasani

1
3

Selecting an element in iframe with jQuery

5 Answers5

Linked

Related