title: Appending to link URL in an IFRAME
body: <p>I have a page with an IFRAME. The IFRAME consists of newsfeed links to RSS articles. I would like to append to each article URL target="_blank", so that each article opens in a new window, not the IFRAME. I don't want to change the layout or function of the original newsfeed page, so I'm looking to dynamically append to the URL when clicked on. The main page and the IFRAME page are in the same domain. Any help would be appreciated.</p>
  
  <p>Sample code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;iframe src="http://vangopainting.net/painting-tips?tmpl=component"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;html&gt;
  </code></pre>
  
  <p>As you can see, the above URL pulls a stripped Joomla page, with just the content shown. This IFRAME will be embedded in a Facebook page, and when a user clicks on a link, it embeds the whole site in the IFRAME, not just the article. I would like for this to open in a new window, not the IFRAME, by appending target="_blank" to the URL, or even appending ?tmpl=component to the URL so that Joomla strips everything but the article.</p>
  
  <p>Edited to add:
  OK...here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $('iframe').load(function(){
              $('a',$(this).contents()).each(function(){this.href = this.href + "?tmpl=component";});
          });
      });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;iframe src="link.html" width="100%" height="50px" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
  &lt;iframe src="http://vangopainting.net/painting-tips?tmpl=component" width="100%" height="100%" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I added the first iframe just for testing purposes in Facebook.</p>
  
  <p>The contents in link.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly"&gt;http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly&lt;/a&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a direct link to the page: <a href="http://vangopainting.net/fb/tabs/paintingtips/index.html" rel="nofollow">http://vangopainting.net/fb/tabs/paintingtips/index.html</a>
  Everything works as it should.</p>
  
  <p>And here is a link to the Facebook page: <a href="https://www.facebook.com/pages/Van-Go-Painting-Inc/177992368936448?sk=app_366401100043274" rel="nofollow">https://www.facebook.com/pages/Van-Go-Painting-Inc/177992368936448?sk=app_366401100043274</a>
  The first iframe's URL is appended as it should, but the second iframe is untouched.</p>
  
  <p>I'm at a losss as to why this isn't working.</p>