Adicionar IFrame fullscreen no site

Olá

Tudo bem?

Algumas vezes passamos pela necessidade de carregar conteúdo do site externo em nosso site. Uma das opções mais rápida é a de carregar um iframe fornecendo a URL do site desejado.

Mas em algumas situações gostaríamos de abrir a página na mesma aba ou em uma nova dentro de nosso dominio mas com o IFrame em fullscreen e inicialmente mesmo tendo só o IFrame na página e adicionando regras de tamanho de 100% de largura e altura ele não ocupa toda a tela.

Para resolver isto é muito simples.
Veja o exemplo abaixo:

<iframe style="border: 0; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%" src="www.algumaurlaqui.com"></iframe>

Simplesmente adicionando o estilo CSS:

border: 0; 
position:absolute; 
top:0; left:0; 
right:0; bottom:0; 
width:100%; 
height:100%

Você consegue fazer com que o IFrame ocupe toda tela.

Espero ter ajudado ;)

Até a próxima.

Comentários

Postagens mais visitadas deste blog

Migrando repositório TFS para GIT

Chega o momento em que decidimos migrar do TFS para GIT por 'N' motivos e benefícios que esta migração pode trazer. Caso você tenha uma repositório de longa data e queira manter o histórico de checkins, o git-tfs auxilia nesta tarefa. Uma das minhas formas preferidas para instalar é através do chocolatey . Com o chocolatey instalado em sua máquina basta abrir o powershell em modo admin e digitar: cinst GitTfs No powershell para clonar o repositório TFS para seu repositório git você deve digitar o seguinte comando: git tfs clone http : //meutfs.com $/diretoriotfs c : /diretorio-alvo-clone --branches=all -u=CORP\Usuario -p=****** Para mais opções de comando segue link do github do projeto.

Dica: Extensão Indentar código VUE Visual Studio Code

Olá Por muitas é necessário um atalho para formatar o seu código fonte no editor de texto. Para formatação de HTML, CSS, JS e afins no visual studio code você pode utilizar o: HTML Snippets Mas esta extensão acima não formata arquivos de template .vue . Para formatar este tipo de arquivos é necessário instalar alguma outra extensão. Entre as que busquei a que faz o serviço da melhor forma atualmente utilizando o atalho alt+shift+f é o plugin ventur: Vetur Este plugin é muito bom mesmo. Facilitou bastante a formatação de fontes em templates .vue. É isso espero que ajude;)

Vex dialog: Customizando texto de botões e recebendo callback corretamente

Olá, Muitos projetos utilizam ótima esta biblioteca chamada VEX para exibir alertas, confirms entre outros tipos de 'modals' para o usuário substituindo o tradicional comando alert("texto"); do navegador (que tem visual mais feinho xD). Neste post quero mostrar como é possível customizar o texto de botões do vex.dialog.open e do vex.dialog.confirm, visto que muitos tem esta dificuldade. Quando você consulta a documentação você acha a seguinte instrução: Então você pensa... ok vou fazer meu vex dialog e sobreescrever as propriedades do confirm ou open na construção do componente. Ficando mais ou menos assim: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 vex.dialog.confirm({ message: "Deseja confirmar?" , buttons: { YES: { text: 'Claro! Agora mesmo.' , className: 'vex-dialog-button-primary vex-dialog-button vex-first' , }, NO: { text: 'Ahhh, não quero......

Jozimar Back's codding blog

Pesquisar este blog