Question

134

Force any HREF in an IFrame to use its parent as the target

rated 0 times [ 136] [ 2] / answers: 1 / hits: 26449 / 15 Years ago, tue, august 4, 2009, 12:00:00

I'm currently using an IFrame to sandbox user generated content on a website. This eliminates any styling issues with our main stylesheets.

However, when a user generates a link using our rich text editor, we would like the link to open in the parent and not just open the link in the IFrame. I realize you can set a target to the parent, but we do not have control of the user and what they enter in their content.

Is there any way to hijack the HREFs inside the IFrame so they all target parent without modifying them? Or use a bit of Javascript that could be injected universally so I do not need to scrape through all of the content and replace the target programatically?

Ideally a simple script in one spot would be the best solution.

Thoughts?

END SOLUTION

I used a variation of the answer I selected... It got me in the right direction.

<script>

  Event.observe(window, 'load', function() {

    $$('a').each(function(e) {

      e.writeAttribute('target', '_parent');

    });

  });

</script>

That's inside the IFrame with the content. It ended up being the most simple solution for the task.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sonja

Add To Favorites

Follow

Total Points: 541

Total Questions: 113

Total Answers: 114

Location: Anguilla

Member since Sun, Jan 29, 2023

1 Year ago

sonja questions

1 Filtering table data for multiple columns Angular 10

Mon, Nov 30, 20, 00:00, 4 Years ago

1 Auto clear cache from browser

Sun, Oct 11, 20, 00:00, 4 Years ago

1 react-table has a issue with rendering in next.js

Thu, May 21, 20, 00:00, 4 Years ago

1 How to stop purging tailwind components

Sun, Nov 10, 19, 00:00, 5 Years ago

1 JS - String includes a substring that matches regex

Mon, Aug 26, 19, 00:00, 5 Years ago

View All

answered 15 Years ago katianatasham · Accepted Answer

Use this to create it and you'll have access to any parts with the $body variable:

$(function() { 

        var $frame = $('<iframe style=width:200px; height:100px;>'); 

        $('body').html( $frame ); 

        setTimeout( function() { 

            var doc = $frame[0].contentWindow.document; 

            var $body = $('body',doc); 

            $body.html('<h1>Test</h1>'); 

        }, 1 ); 

    });

So you can then do something like this

$('a', $body).attr('target', '_parent');

Found here: http://groups.google.com/group/jquery-en/browse_thread/thread/fb646741a6192540