🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

JQuery/JavaScript: accessing contents of an iframe

I would like to manipulate the HTML inside an iframe using jQuery.

I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like:
$(function(){ //document ready

    $('some selector', frames['nameOfMyIframe'].document).doStuff()

});

However this doesn't seem to work. A bit of inspection shows me that the variables in frames['nameOfMyIframe'] are undefined unless I wait a while for the iframe to load. However, when the iframe loads the variables are not accessible (I get permission denied-type errors).

Does anyone know of a work-around to this?
iframe jquery javascript
by

3 Answers

akshay1995
If the <iframe> is from the same domain, the elements are easily accessible as


$("#iFrame").contents().find("#someDiv").removeClass("hidden");
pankajshivnani123
You could use .contents() method of jQuery.

The .contents() method can also be used to get the content document of an iframe, if the iframe is on the same domain as the main page.


$(document).ready(function(){

    $('#frameID').load(function(){

        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');

    });

});
kshitijrana14
Use
iframe.contentWindow.document

instead of
iframe.contentDocument

Login / Signup to Answer the Question.

LoginSignup