Force any HREF in an IFrame to use its parent as t

2019-02-15 15:36发布

站内文章 / JavaScript
15 0 0

问题:

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.

回答1:

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



回答2:

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).



回答3:

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.



回答4:

Simplest answer:

<head>
    <base target="_blank">
</head>


标签： javascript jquery iframe href target
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~