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

StackOverflow https://stackoverflow.com/questions/1225245

Question

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.

Was it helpful?

Solution

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

OTHER TIPS

Same domain in the iframe? Yes.

<script type="text/javascript">
function hijacklinks(iframe){
  var as = iframe.contentDocument.getElementsByTagName('a');
  for(i=0;i<as.length;i++){
    as[i].setAttribute('target','_parent');
  }
}
</script>

<iframe src="http://example.com/test.html" onload="hijacklinks(this)"></iframe>

Different domain in the iframe? No.

<iframe src="http://www.google.com/search?q=google+happy" onload="hijacklinks(this)"></iframe>

yields a "Permission denied to get property HTMLDocument.getElementsByTagName".

There may be ways around, but at least with simple JavaScript their are some protections against iframes mucking with sites (imagine a malicious frame around a bank's website and you can understand why).

I got around the cross domain issue via ajax..

function runAjaxDone(response) {
            $('body').html(response);
        }
        function callAjax(url) {
            $.ajax({ url: url + '&r=' + Math.random(), success: runAjaxDone });
            return false;
        }

<a runat="server" href="#"
                        onclick='<%# "callAjax(\"http://partners.thevoiceinternet.com/portal/Customer/Report/AgentReport.aspx?AgentID="+Eval("AgentID").ToString()+"&name="+Server.UrlEncode(Eval("SubAgentName").ToString())+"\"); return false;" %>'>
                        <asp:Label ID="lbl" runat="server" Text='<%# Eval("SubAgentName") %>'></asp:Label></a>

Since the parent frame cant be accessed, I replaced the body via ajax.

Simplest answer:

<head>
    <base target="_blank">
</head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top