15

Como identificar se qualquer link originado de um iframe que não tenho acesso foi aberto em uma nova guia?

Tentei com document.getElementById("i").addEventListener("click", a);, mas ao que percebi não é possível usar onclick em um iframe ao menos que tenha acesso direto ao código fonte do iframe

Tentei com uma div sobreposta porém anula o primeiro click no iframe sendo que é necessário mais de um click para abrir o link

Então procurei como identificar se um link foi aberto em uma nova guia e não achei nada parecido.

O usuario da minha pagina tem que completar uma tarefa no iframe ao terminar a tarefa dentro do iframe uma pagina será aberta em nova guia, como identificar se a guia foi aberta?

Snippet de exemplo:

document.getElementById("i").onclick = function a(){
console.log("ok")
}
Preencha com seu nome e conclua<br>
<iframe id="i" src="https://editor.sollic.com/iframe.html"></iframe>


O mais proximo que cheguei foi por meio de uma div sobrepondo o iframe.

Pagina de exemplo: https://editor.sollic.com/stackoverflow

Explicando o código: Ao passar o mouse sobre a div ela desaparecerá por 1 segundo sempre que o mouse estiver sobre ela permitindo que clique em qualquer lugar até que a pagina saia de foco, com isso se a div estiver oculta e a pagina sair de foco ativará o "gatilho" que enviará "ok" no console ou no caso do link de exemplo mudará a cor de fundo para vermelho.

Porém há momentos que funciona corretamente e em outros não funciona ou funciona de forma errada, como clicando em qualquer lugar e recebendo a mensagem do console ou mudando a cor de fundo.
O snippet não funciona corretamente pois o stackoverflow bloqueia.

var foco = true;

function con() { //função que será ativada ao passar o mouse
   window.onblur = function(){foco = false} //verifica se a pagina está fora de foco
   window.onfocus = function(){foco = true} //verifica se a pagina está em foco
   
   if(foco!=false) {document.getElementById("a").style.display='block'} //se a pagina estiver em foco reativa a div
   else {console.log("ok")} //se a pagina estiver em foco envia "ok" no console
}

function la() {document.getElementById("a").style.display='none'} //desativa a div
#a{
position:absolute;
z-index:1;
background:#000;
width:304px;
height:155px
}
<div id="a" onmouseover="setTimeout(con, 1000);la();"></div>
<iframe id="i" src="https://editor.sollic.com/iframe.html"></iframe>

10
  • Só uma curiosidade: que ação vc queria fazer ao detectar que a nova aba foi aberta?
    – Sam
    Commented 8/02/2019 às 16:16
  • No momento a pagina vai ser redirecionada para a pagina anterior
    – Mark Vaaz
    Commented 8/02/2019 às 16:30
  • É jovem, sem querer ser desanimador, mas acho que isso não é possível. Um iframe é como se fosse um documento separado dentro de outro. O documento pai não escuta eventos no documento filho, a não ser que fosse do mesmo domínio. Quando o iframe abre uma nova aba, esse evento passa por cima do documento pai, e não cria nenhum tipo de relação entre o documento pai e o documento do iframe. O único evento que consigo ver que cria uma certa ligação entre os dois documentos é o window.onblur, já que, quando uma nova é aberta, o blur é disparado no documento da aba que estava ativa.
    – Sam
    Commented 8/02/2019 às 16:38
  • Porém o blur tb é disparado quando vc muda de aba, aí não tem como saber se o evento foi disparado por causa do iframe.
    – Sam
    Commented 8/02/2019 às 16:39
  • Eu imaginei que o blur seria assim, mas se eu tiver o endereço da pagina que vai ser aberta, é possível acessar pelo histórico do navegador se a pagina foi aberta?
    – Mark Vaaz
    Commented 8/02/2019 às 16:49

2 Respostas 2

7
+100

Quando o assunto se trata de iFrames, deve-se considerar um fator decisivo para o andamento do seu problema. A Politica da mesma origem(SOP). [1] [2]

Um navegador da Web permite que scripts contidos em uma primeira página acessem dados em uma segunda página da Web, mas somente se ambas as páginas da Web tiverem a mesma origem. [1]


Mas como saber se estou usando um iFrame de mesma origem que minha página Web?
Em comparação, duas URL's possuem mesma origem se o protocolo(http,https), porta(se for expecífica) and host(se forem iguais em ambos).

Vamos simular que o seu site possua a seguinte URL:

http://meusite.markvaaz.com/pasta/index.html:

|URL                                        | RESULTADO     | RAZÃO 
+-------------------------------------------+---------------+------------------------------+ 
|http://markvaaz.com/pasta/site.html        |  Mesma Origem | Apenas caminhos diferentes.  |
|http://markvaaz.com/pasta/pasta2/site2.html|  Mesma Origem | Apenas caminhos diferentes.  |
|https://markvaaz.com/pasta/html.html       |     Falha     | Protocolo diferente(https).  |
|http://markvaaz.com:81/pasta/outro.html    |     Falha     | Portas diferente da padrão.  |
|https://editor.sollic.com/iframe.html      |     Falha     | Protocolo/host diferentes .  |

Nota¹: O protocolo http:// utiliza a porta 80 como padrão.
Nota²: Para o IE a diferença de portas não é validado, logo, seria considerado Mesma Origem no IE caso a URL acessada utilizasse outra porta.

Caso seu resultado for de Mesma Origem, você poderá utilizar window.postMessage() para trocar informações entre seus Objetos, segue um exemplo.

Na sua página principal:

window.onload = function(){
   var frame = document.getElementById('i'); 
   frame.contentWindow.postMessage('Olá Frame.', '*'); 
};

No seu iFrame:

    window.addEventListener('mensagem', function(e)){
    console.log('mensagem recebida!');
};


É possível desabilitar a Politica da mesma origem do seu navegador?
Há uma maneira de realizar a manipulação entre frames, porém, se tornaria inútil(mesmo achando válido explanar sobre o assunto) para o seu caso, uma vez que terceiros utilizarão seu Website. Desabilitar a política da mesma origem consiste em uma sequência de passos(podendo ser de simples até complicado dependendo de qual navegador deseja desabilitar o SOP) que afetará apenas o seu navegador e impedirá de que o mesmo cenário ocorra quando subir o seu servidor. Apesar de não ser indicado utilizar a desabilitação, indico fazer isso apenas para casos de testes e desenvolvimento, pois deixará seu navegador vulnerável para qualquer acesso de origens desconhecidas.

Fontes:stackoverflow, stackoverflow, w3c, developer.mozilla, youtube.

7

Isso não pode ser feito na maioria dos casos.

Essa impossibilidade é uma medida de segurança adotada para prevenir principalmente ameaças como o XSS. No entanto, se o iframe tiver a mesma origem do seu site, você pode acessar o seu conteúdo e realizar as modificações.

No exemplo abaixo, o iframe não poderia ser modificado pelo JavaScript, já que as origens são diferentes:

<!-- Assuma que a URL do site é google.com: -->

<!-- O `iframe` a seguir NÃO poderia ser "acessado", já que a origem "apple.com" é diferente de "google.com": -->
<iframe src="https://apple.com"></iframe>

No exemplo a seguir, no entanto, o iframe poderia ser modificado, já que as origens são iguais:

<!-- Assuma que a URL do site é google.com: -->

<!-- O `iframe` a seguir poderia ser "acessado", já que as origens são iguais: -->
<iframe src="https://www.google.com/search?q=StackOverflow"></iframe>

Para acessar, você pode fazer assim:

//
// NOTA:
//
// Esse código só irá funcionar se você estiver em uma página
// cuja URL comece com "https://google.com"!
//

// Inserir um <iframe> na página:
document.body.innerHTML = '<iframe src="https://www.google.com/search?q=StackOverflow" style="width: 80vw; height: 60vh;"></iframe>'

// Capturar o elemento <iframe>:
const iframe = document.querySelector('iframe')

// Aguardar o conteúdo carregar:
iframe.addEventListener('load', () => {
  // Acessar o documento do <iframe>:
  const iframeDocument = iframe.contentDocument
    ? iframe.contentDocument
    : iframe.contentWindow.document

  // Colorir todos os links de vermelho para demonstração:
  iframeDocument.querySelectorAll('a').forEach((a) => {
    a.style.setProperty('color', 'red')
  })
})

No exemplo acima (que para funcionar deve ser executado em alguma página cuja origem seja google.com), todos os links do iframe serão pintados de vermelho.


Em suma, a não ser que as origens sejam as mesmas, você não será capaz de identificar se o link foi aberto ou não, assumindo que ele esteja contido em um iframe.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .