CODEWITHSUNDEEP
javascriptjqueryhtmliframeappend
Curtis Holzschuh
Curtis Holzschuh

Reputation: 33

Appending to link URL in an IFRAME

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.

Sample code:

<html>
<head>
</head>
<body>
<iframe src="http://vangopainting.net/painting-tips?tmpl=component"></iframe>
</body>
<html>

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.

Edited to add: OK...here is my code:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(function() {
        $('iframe').load(function(){
            $('a',$(this).contents()).each(function(){this.href = this.href + "?tmpl=component";});
        });
    });
</script>
</head>
<body>
<iframe src="link.html" width="100%" height="50px" frameborder="0" scrolling="no"></iframe>
<iframe src="http://vangopainting.net/painting-tips?tmpl=component" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</body>
</html>

I added the first iframe just for testing purposes in Facebook.

The contents in link.html:

<html>
<head>
</head>
<body>
<a href="http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly">http://vangopainting.net/painting-tips/508-newest-mobile-app-matches-paint-color-instantly</a>
</body>
</html>

Here is a direct link to the page: http://vangopainting.net/fb/tabs/paintingtips/index.html Everything works as it should.

And here is a link to the Facebook page: https://www.facebook.com/pages/Van-Go-Painting-Inc/177992368936448?sk=app_366401100043274 The first iframe's URL is appended as it should, but the second iframe is untouched.

I'm at a losss as to why this isn't working.

Upvotes: 3

Views: 3210

Answers (2)

cheeken
cheeken

Reputation: 34695

This should work for you.

$('a',$('iframe').contents()).attr('target','_blank');

In short, it grabs the contents of all iframes, finds their a tags, and applies the appropriate target attribute.

Add the following (untested) code snippet inside of the head tag in your example to achieve the desired effect.

<script>
    $(function() {
        $('iframe').load(function(){
            $('a',$(this).contents()).attr('target','_blank');
        });
    });
</script>

There is a lot of waiting on events happening in the above snippet.

  • First, we wait for the page to load by passing a callback function to $. We want to wait for the page to load so we know we can find our iframes.
  • When that callback is performed, we find all iframes and attach a different callback to be invoked when they are loaded.
  • This different callback is the code snippet that does the actual work of finding the a tags and amending them.

Upvotes: 1

Rafay
Rafay

Reputation: 31043

you can access the contents of the iframe using .contents and then find the elements inside the iframe using .find then using each modify the element to your liking, since you have not provided any code so im also going to stick to the theoretical answer

Upvotes: 0

Related Questions