>
Esta biblioteca permite o redimensionamento automático da altura e largura dos iFrames tanto do mesmo como do domínio cruzado para se ajustar ao seu conteúdo contido. Ela fornece uma gama de recursos para resolver os problemas mais comuns com o uso de iFrames, estes incluem:
- Redimensionamento da altura e largura do iFrame para o tamanho do conteúdo.
- Trabalha com iFrames múltiplos e aninhados.
- Autenticação de domínio para iFrames de domínio cruzado.
- Provê uma gama de métodos de cálculo de tamanho de página para suportar layouts CSS complexos.
- Detecta alterações no DOM que podem causar o redimensionamento da página usando o MutationObserver.
- Detecta eventos que podem causar o redimensionamento da página (Redimensionamento da Janela, Animação e Transição CSS, Alteração de Orientação e eventos do Mouse).
- Mensagens simplificadas entre o iFrame e a página host via postMessage.
- Fixes em links de página no iFrame e suporta links entre a página iFrame e a página pai.
- Provê métodos personalizados de dimensionamento e rolagem.
- Expõe a posição dos pais e o tamanho do viewport para o iFrame.
- Provê eventos para o iFrame.
- Funciona com o ViewerJS para suportar documentos PDF e ODF.
- Suporta IE 11 (V3 suporta de volta ao IE8)
Doa
Iframe-resizer é o resultado de muitas 100s de horas de trabalho, se você gostaria de se juntar a outros para mostrar apoio para o desenvolvimento contínuo deste projeto, então por favor sinta-se livre para me comprar um café.
Comece a Comprar
Instalação
Este pacote pode ser instalado via NPM (npm install iframe-resizer --save).
Uso
O pacote contém dois arquivos JavaScript minificados na pasta js. O primeiro (iframeResizer.min.js) é para a página que hospeda os iFrames. Ele pode ser chamado via JavaScript:
const iframes = iFrameResize( , || );
O segundo arquivo (iframeResizer.contentWindow.min.js) precisa ser colocado na(s) página(s) contida(s) dentro do seu iFrame. Este arquivo foi projetado para ser um convidado no sistema de outra pessoa, portanto não tem dependências e não fará nada até que seja ativado por uma mensagem da página contendo o iFrame.
Configuração típica
A configuração normal é ter o iFrame redimensionado quando a janela do navegador muda de tamanho ou o conteúdo do iFrame muda. Para configurar esta configuração é necessário configurar uma das dimensões do iFrame para uma percentagem e dizer à biblioteca para actualizar apenas a outra dimensão. Normalmente você configuraria a largura para 100% e teria a escala de altura para caber no conteúdo.
<style> iframe { width: 1px; min-width: 100%; }</style><iframe src="http://anotherdomain.com/iframe.html"></iframe><script> iFrameResize({ log: true }, '#myIframe')</script>
Note: Usando a largura mínima para definir a largura do iFrame, funciona em torno de um problema no iOS que pode impedir o dimensionamento correto do iFrame.
Se você tiver problemas, verifique a seção de solução de problemas.
Exemplo
Para ver este trabalho, dê uma olhada neste exemplo e observe o console.
Documentação da API
IFrame-Resizer fornece uma extensa gama de opções e APIs tanto para a página pai quanto para a página iframed.
- Página mãe API
- Opções
- Eventos
- Métodos
- IFramed Página API
- Opções
- Eventos
- Métodos
- Uso com Bibliotecas e Estruturas
- Reagir
- Va
- Angular
- Ember
- JQuery
- Google Apps Script
- Solução de problemas
- Actualização da versão 3
- Histórico de versões