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

2019-02-15 15:50发布

站内问答 / JavaScript
1143 4 4

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.

4条回答
【Aperson】
2楼-- · 2019-02-15 16:15

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

查看更多
0人赞 添加讨论(0) 举报
兄弟一词,经得起流年.
3楼-- · 2019-02-15 16:24

Simplest answer:

<head>
    <base target="_blank">
</head>
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
4楼-- · 2019-02-15 16:26

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.

查看更多
0人赞 添加讨论(0) 举报
放我归山
5楼-- · 2019-02-15 16:33

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)