3
respostas

iFrame

Gostaria de saber se existe alguma forma de inserir iFrame no angular para visualizar sites externos.

Segue abaixo um exemplo, na minha empresa precisamos usar URL externa mas sem sair do projeto/template

<iframe src="https://www.google.com"></iframe>

Tentamos de varias forma mas a princípio parece que o angular não permite.

3 respostas

O site do Google não permite acessá-lo dentro de um iframe porque eles não disponibilizam X-Frame-Options na requisição deles. Muito provavelmente você receberá esse erro:

Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Deixando de lado o site do Google e acessando um site que deixa você acessá-lo pelo iframe, não vejo problema nisso. Por exemplo, coloque esse iframe do youtube em qualquer template do seu componente que ele será exibido normalmente:

<iframe width="560" height="315" src="http://cangaceirojavascript.com.br"></iframe>

Quando eu clico nos links, eu navego dentro do iframe e não pela aplicação Angular.

Em suma, é uma questão de backend e não do front-end.

Porém, se o link acima por alguma razão não for exibido no seu projeto, você pode tentar criar um pipe que permita o acesso inseguro de sites. Tem uma dica nesse link:

https://www.linkedin.com/pulse/working-iframe-angular-thiago-adriano

Obrigado, Flavio.

Já tinha visto o exemplo dele antes, tentei novamente e só dá certo no link que ele passa. tentei colocar outras URLs e aparece o erro: Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Isso. É configuração do back da url que você quer acessar.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software