I'm new to jQuery and having some trouble. A have a page that has a iframe inserted after the page loads. I need to find the anchor links in the content of the iframe and pare their href to a URL. Just trying the pure JavaScript getElementById() doesn't work because the iframe is inserted after the load. I read that I should be using either jQuery's live(), delegate(), or on(), but I'm not sure how they work. Also, if there is a pure Javascript solution that would be awesome as well.

The iframe I need to parse is:

<iframe src=".html?10&src=http%3A%2F%2Fstaff.tumblr%2F&amp;lang=en_US&amp;name=staff"
    scrolling="no" width="330" height="25" frameborder="0" 
    style="position:absolute; z-index:1337; top:0px; right:0px; 
           border:0px; background-color:transparent; overflow:hidden;" 
           id="tumblr_controls">
</iframe>

It is appended to every Tumblr blog (see Tumblr Staff Blog).

The part of the iframe's content I'm interested in looks like:

<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', 'staff');">
    <input type="hidden" name="form_key" value="8W0r1XnbOEtpTF0q8oe96BmGMJg"/>
    <input type="hidden" name="id" value="staff"/>
    <input type="image" src=".png 1018" style="width:58px; height:20px; border-width:0px; display:block; margin-left:3px; cursor:pointer;" alt="Follow"/>
    </form>
    <a target="_top" href="">
    <img src=".png?1018" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;"/>
</a>

I need to pare all the possible anchor links in this content and pare their hrefs to a URL.

I'm new to jQuery and having some trouble. A have a page that has a iframe inserted after the page loads. I need to find the anchor links in the content of the iframe and pare their href to a URL. Just trying the pure JavaScript getElementById() doesn't work because the iframe is inserted after the load. I read that I should be using either jQuery's live(), delegate(), or on(), but I'm not sure how they work. Also, if there is a pure Javascript solution that would be awesome as well.

The iframe I need to parse is:

<iframe src="http://assets.tumblr./iframe.html?10&src=http%3A%2F%2Fstaff.tumblr.%2F&amp;lang=en_US&amp;name=staff"
    scrolling="no" width="330" height="25" frameborder="0" 
    style="position:absolute; z-index:1337; top:0px; right:0px; 
           border:0px; background-color:transparent; overflow:hidden;" 
           id="tumblr_controls">
</iframe>

It is appended to every Tumblr blog (see Tumblr Staff Blog).

The part of the iframe's content I'm interested in looks like:

<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', 'staff');">
    <input type="hidden" name="form_key" value="8W0r1XnbOEtpTF0q8oe96BmGMJg"/>
    <input type="hidden" name="id" value="staff"/>
    <input type="image" src="http://assets.tumblr./images/iframe_follow_alpha.png 1018" 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./dashboard">
    <img src="http://assets.tumblr./images/iframe_dashboard_alpha.png?1018" alt="Dashboard" style="height:20px; width:81px; border-width:0px; display:block; float:left; cursor:pointer;"/>
</a>

I need to pare all the possible anchor links in this content and pare their hrefs to a URL.

• javascript
• jquery
• iframe

Share Improve this question Follow edited Jul 26, 2012 at 4:55 Spencer asked Jul 26, 2012 at 4:31 SpencerSpencer 4,1581010 gold badges3434 silver badges4343 bronze badges 2

• 1 I believe the question was to reference anchor links inside of the iFrame not the source URL of the iFrame right? If this is the case I fear you may not have access to the internals of the iFrame since it is loaded from an external location. Read the scripting portion of: developer.mozilla/en/HTML/Element/iframe – jholloman Commented Jul 26, 2012 at 4:44
• @jholloman I think you might be right. I'm get errors regarding accesses the content of and iframe from a different domain. :( – Spencer Commented Jul 26, 2012 at 5:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

function getHref() {

  var src = false,
      iframe = $('iframe#tumblr_controls');  // keep reference of iframe;
  // check that iframe loaded
  if( iframe.length) { 
     src = iframe.find('a[target=_top]').attr('href');
  }
}

Now you can call getHref() to get the href of link within iframe and use that for parison.

You can also try like following:

$('iframe#tumblr_controls').load(function() {
   var href = $(this).find('a[target=_top]').attr('href');
});

If you have multiple a tags within your content then try:

function pareHrefs() {
  var iframe = $('iframe#tumblr_controls');  // keep reference of iframe;
  // check that iframe loaded
  if( iframe.length) { 
     // looping over each  tag
     iframe.find('a').each(function() {
          if ( this.href == TARGET_URL ) {
             // do something
          }
     });
  }
}

Your iframe is another document, so you should treat it as such...

$(document).ready(function(){
  $("#iframe).load(function(){
   //do stuff
  })
});

Once you inserted your iframe, you can the get the iframe from its id like in jquery

$('#tumblr_controls')

and to get the source url just use the attr of jquery like

var source = $('#tumblr_controls').attr('src');

Working demo on jsfiddle