Forçar qualquer HREF em um IFrame a usar seu pai como destino

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

Pergunta

Atualmente, estou usando um IFrame para criar uma área restrita de conteúdo gerado pelo usuário em um site.Isso elimina quaisquer problemas de estilo com nossas folhas de estilo principais.

No entanto, quando um usuário gera um link usando nosso editor de rich text, gostaríamos que o link fosse aberto no pai e não apenas no IFrame.Sei que você pode definir uma meta para o pai, mas não temos controle do usuário e do que ele insere em seu conteúdo.

Existe alguma maneira de sequestrar os HREFs dentro do IFrame para que todos tenham como alvo o pai sem modificá-los?Ou usar um pouco de Javascript que possa ser injetado universalmente para que eu não precise vasculhar todo o conteúdo e substituir o destino programaticamente?

Idealmente, um script simples em um único local seria a melhor solução.

Pensamentos?

SOLUÇÃO FINAL

Usei uma variação da resposta que selecionei ...Isso me colocou na direção certa.

<script>
  Event.observe(window, 'load', function() {
    $$('a').each(function(e) {
      e.writeAttribute('target', '_parent');
    });
  });
</script>

Isso está dentro do IFrame com o conteúdo.Acabou sendo a solução mais simples para a tarefa.

Foi útil?

Solução

Use isto para criá-lo e você terá acesso a qualquer parte com a variável $body:

$(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 ); 
    });

Então você pode fazer algo assim

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

Encontrado aqui: http://groups.google.com/group/jquery-en/browse_thread/thread/fb646741a6192540

Outras dicas

Mesmo domínio no iframe?Sim.

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

Domínio diferente no iframe?Não.

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

produz uma "Permissão negada para obter a propriedade HTMLDocument.getElementsByTagName".

Pode haver maneiras de contornar, mas pelo menos com JavaScript simples, existem algumas proteções contra iframes que interferem em sites (imagine um quadro malicioso em torno do site de um banco e você entenderá o porquê).

Resolvi o problema de vários domínios 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>

Como o quadro pai não pode ser acessado, substituí o corpo via ajax.

Resposta mais simples:

<head>
    <base target="_blank">
</head>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top