Abrindo Links de um iframe na Janela Pai: Uma Solução
Resposta Rápida
Para fazer com que links dentro de um iframe abram não no próprio iframe, mas na janela pai, use o atributo target="_parent" dentro das suas tags <a>:
<!-- No documento do iframe -->
<a href="http://stackoverflow.com" target="_parent">Ir para o Stackoverflow</a>Com essa configuração, os links redirecionarão o usuário diretamente para a janela pai.
Foco na Tag base
Todas as Capacidades da Tag base
A tag <base> é usada para definir a URL base para links relativos e imagens dentro do iframe. Coloque-a na seção <head> do documento do iframe:
<!-- Considere a seção <head> do documento do iframe como o bloco de controle -->
<base target="_parent">Com isso, todos os links abrirão automaticamente na janela pai, então você não precisará especificar target="_parent" toda vez. Não poderia ser mais fácil!
Limitações de Domínio
Lembre-se da política de mesmo domínio: para que haja interação entre o iframe e a janela pai ao usar target="_parent", ambos devem pertencer ao mesmo domínio. Caso contrário, você enfrentará restrições de segurança do navegador.
Compatibilidade entre Navegadores
Considere a compatibilidade da tag <base> com diferentes navegadores. Recomenda-se verificar em caniuse.com.
Javascript e jQuery a Salvo
Gerenciando com JavaScript
O JavaScript permite um controle mais flexível sobre o comportamento dos links. Considere o seguinte código JavaScript, que força um link a abrir na janela pai:
<a href="#" onclick="window.top.location='http://stackoverflow.com'">Ir para o Stackoverflow</a>O JavaScript dá controle sobre as ações do usuário, assim como um maestro conduzindo uma orquestra.
Facilidade de Uso do jQuery
Se você precisa controlar múltiplos iframes ou links, o jQuery tornará a tarefa muito mais fácil. O seletor .contents() permite que você obtenha o conteúdo do iframe e modifique os atributos das tags <a>:
$('iframe').contents().find('a').attr('target', '_parent');Agora, todos os links dentro do iframe estão configurados para abrir na janela pai. Graças ao jQuery por sua simplicidade e conforto!
Jogue pelas Suas Próprias Regras
Controle Sobre os Links
Se você quiser que apenas alguns links abram na janela pai, adicione target="_parent" a cada um desses links individualmente:
<a href="http://lovely-exception.com" target="_parent">Visite lovely-exception.com na janela pai</a>Indo até o Topo
Se o seu objetivo é abrir um link no nível mais alto, por exemplo, ao trabalhar com iframes aninhados, use _top em vez de _parent:
<!-- Abra novos horizontes indo para o nível superior -->
<a href="http://another-example.com" target="_top">Ir para another-example.com na janela principal</a>Segurança é Importante!
Recomendamos que você seja extremamente cauteloso com a segurança ao lidar com o comportamento de links em iframes. Sempre verifique URLs e proteja seu site contra ataques potenciais, como clickjacking. Navegar com segurança deve ser sua prioridade!
Visualização
Aqui está um exemplo de código demonstrando o comportamento dos links em um iframe, que por padrão abrem na janela pai:
<iframe>
<a href="http://example.com" target="_parent">Ir para Example.com</a>
</iframe>Lembre-se, target="_parent" garante o redirecionamento para a janela pai:
Dentro do iframe: 🖼️ [Link]
- Regras? Regras não são para gatos! 🐱👤
Açúcar e o objetivo principal 🖼️ [Link 🧭]
- Disciplina, ele abre na janela pai. Como um cachorro confiável! 🐶Recursos Úteis
<iframe>: O Elemento Inline Frame - MDN — Um guia detalhado sobre como usar o elemento<iframe>.- html - Como fazer um link em um iframe abrir na janela pai - Stack Overflow — Discussão da comunidade no Stack Overflow sobre como redirecionar links em um iframe.
- Como usar a API de Tela Cheia do HTML5 — SitePoint — Um guia sobre como usar a API de tela cheia que pode ser útil para conteúdo em tela cheia dentro de iframes.
- .contents() | Documentação da API do jQuery — Documentação do jQuery sobre como trabalhar com elementos do iframe.
- Webappsec/navegação de frames - W3C Wiki — Wiki do W3C sobre questões de segurança relacionadas a frames de navegação.