CODEWITHSUNDEEP
jquerydomiframe
RGBK
RGBK

Reputation: 2048

No success with accessing an iframes content via ".content()"

http://api.jquery.com/contents/

Supposedly, you are able to access an iframes DOM via the contents() method. I've cut and pasted the code, chnaged the id to the iframe on my page, and going for a very simple div, the only one in the iframe. It doesnt find it. I've successfully managed to manipulate the css of the iframe itself, so I'm pretty sure everything is correct. It's also all in a document ready conditional.

The page in question is here http://syndex.me/tagged/belgium

Hope someone can shed some light on this methods workings.

Thanks

$("#tumblr_controls").css({
   position : 'fixed',
   top : 'auto',
   bottom : '15px',
}); //works
$("#tumblr_controls").contents().find("div").css("right","auto"); //doesnt work
$("#tumblr_controls").contents().find("div").css("left","0"); //doesnt work

Please note you have to be logged into tumblr in order to see the controls in question I believe.

<iframe src="http://assets.tumblr.com/iframe.html?10&amp;src=http%3A%2F%2Fsyndex.me%2F&amp;lang=en_US&amp;name=syndex&amp;brag=0" scrolling="no" width="330" height="25" frameborder="0" style="right: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; position: fixed; top: auto; bottom: 15px; z-index: 1000007; " id="tumblr_controls">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="x-dns-prefetch-control" content="off">
        <link rel="icon" href="http://assets.tumblr.com/images/favicon.gif?2" type="image/gif">
 </head>
    <body style="background-color:transparent; margin:0px; padding:0px;" onload="var image1 = new Image(); image1.src = 'http://assets.tumblr.com/images/iframe_like_alpha.png';
    var image2 = new Image(); image2.src = 'http://assets.tumblr.com/images/iframe_like_active_alpha.png';">

    <style>
        img {
            margin-left: 3px;
        }
    </style>

    <div style="position:absolute; top:3px; right:3px; white-space:nowrap; height:20px;">

<form action="/follow" method="post" style="display:block; float:left;" onsubmit="_gaq.push(['_trackEvent', 'Iframe', 'Follow', 'syndex');">
                            <input type="hidden" name="form_key" value="4d9WHkMln7qxbqRkkU1FJ51jYk">
                            <input type="hidden" name="id" value="syndex">
                            <input type="image" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?663" style="width:58px; height:20px; border-width:0px; display:block;
                            margin-left:3px; cursor:pointer;" alt="Follow">
                        </form>

            <a target="_top" href="http://www.tumblr.com/dashboard"><img src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?663" alt="Dashboard" style="height:20px;
            width:81px; border-width:0px; display:block; float:left; cursor:pointer;"></a>

                        </div>

</body></html>

</iframe>

Upvotes: 1

Views: 482

Answers (1)

Neil
Neil

Reputation: 55392

You don't have permission to access the contents of the tumblr_controls frame because it comes from another domain.

Further info:

Upvotes: 3

Related Questions