ansaurus

Question

jquery/javascript: accessing contents of an iframe

Answer 1

A:

Have you tried the classic, waiting for the load to complete using jQuery's builtin ready function?

$(document).ready(function() {
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
} );

K

Khb 2008-12-13 08:06:29

Yes. The ready function starts executing when the main frame is loaded -- not when the iframe is loaded. The wait seems to be a small part of the problem, though. I think it has to do with cross-domain security.

rz 2008-12-13 08:07:49

Answer 2

+6 A:

You need to attach an event to an iframe's onload handler, and execute the js in there, so that you make sure the iframe has finished loading before accessing it.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

The above will solve the 'not-yet-loaded' problem, but as regards the permissions, if you are loading a page in the iframe that is from a different domain, you won't be able to access it due to security restrictions.

Andreas Grech 2008-12-13 08:11:29

this is a good idea, in fact I was trying it just as you answered. However, it doesn't work around the permission denied (it does address my having to wait before starting to access the iframe stuff)

rz 2008-12-13 08:16:30

actually... nevermind, it seems that the wait is still required even when doing this.

rz 2008-12-13 08:20:07

Sooo... the ready function doesn't work?

Salamander2007 2008-12-13 22:05:59

The ready function works. However, it seems that it doesn't wait for the contents of the iframe to finish loading -- only for the parent document even when invoked on the contents of the iframe itself. I imagine it is also because of the same origin policy.

rz 2008-12-14 23:15:30

A couple of notes on this code: you should use iframe.contentDocument instead of .document, and you should use .load() instead of .ready() to avoid the wait. (Not perfect, but better)

Rodrigo Queiro 2009-07-27 22:55:17

Answer 3

+22 A:

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

mizar 2008-12-13 08:25:40

amazing how few people are aware of this

annakata 2009-01-15 10:33:05

Answer 4

+23 A:

If the iframe is the same domain, the elements are easily accessible as

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

reference: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Yasir Laghari 2009-10-28 18:54:19

this just saved my life.

Jason 2010-04-28 17:39:01

Answer 5

+2 A:

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

davryusha 2010-04-02 18:27:46

Answer 6

A:

Complete explanation and solution here Access Iframe content using JQuery

Rare Solutions 2010-04-06 07:55:35

Unfortunately, a bit difficult to find amidst the ads.

reinierpost 2010-04-06 08:11:38

Answer 7

A:

If I have access to the site that is in the iframe, which is an remote content and ore a diffrent domain, can I give my domain access to that site/domain? Is it possible in the server controls ore in some other way?

2010-06-22 10:17:01

Answer 8

+2 A:

If the iframe src is from another domain you can still do it. You need to read the external page into PHP and echo it from your domain. Like this:

iframe_page.php

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>

Then something like this:

display_page.html

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

The above is an example of how to edit an external page through an iframe without the access denied etc...

basysmith 2010-06-27 10:15:18

ansaurus

tags:

views:

answers:

jquery/javascript: accessing contents of an iframe

iframe_page.php

display_page.html

related questions