Ajuste a largura e a altura do iframe para que se ajustem ao conteúdo


300

Eu preciso de uma solução para auto-ajuste do widthe heightde um iframea mal cabem seu conteúdo. O ponto é que a largura e a altura podem ser alteradas após o iframecarregamento. Acho que preciso de uma ação de evento para lidar com a alteração nas dimensões do corpo contida no iframe.



A resposta aceita não funciona. Tente stackoverflow.com/a/31513163/482382
Steven Shaw

Respostas:


268
<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

8
@StoneHeart: sim, é um navegador cruzado. O código não é compatível com o padrão devido à propriedade contentWindow, que não está definida na especificação do DOM. Na especificação DOM existe uma propriedade chamada contentDocument, mas o Internet Explorer 6 (e 7?) Não a suporta. A propriedade contentWindow pode ser usada e implementada em todos os navegadores comuns (Gecko, Opera, Webkit, IE).
244 Rafael Rafael

30
Para que serve if (document.getElementById)?
Ally

55
Além disso, não esqueça que não é um domínio cruzado. Motivo pelo qual está recebendo um tipo de erro: permissão negada para acessar a propriedade 'document' se o domínio for diferente. Uma solução pode ser encontrada aqui
Pierre de LESPINAY 12/12/12

15
O condicional não é apenas inútil, mas, nas raras circunstâncias a que se destina, é garantido que causará problemas. Por que você está verificando se existe um método e depois está usando o método fora da verificação?
JS

6
Eu acho que você quis dizer DOMContentLoaded, já que DOMContentReadynão parece ser uma coisa: developer.mozilla.org/en-US/...
Max Heiber

46

Plug-in jQuery entre navegadores .

Biblioteca cross-bowser, entre domínios usada mutationObserverpara manter o tamanho do iFrame no conteúdo e postMessagepara se comunicar entre o iFrame e a página do host. Funciona com ou sem jQuery.


3
A biblioteca iframe-resizer é a solução mais robusta.
Kwill 10/05/19

35

Todas as soluções fornecidas até agora representam apenas um redimensionamento único. Você mencionou que deseja redimensionar o iFrame após a modificação do conteúdo. Para fazer isso, é necessário executar uma função dentro do iFrame (depois que o conteúdo for alterado, você precisará disparar um evento para dizer que o conteúdo foi alterado).

Fiquei preso por um tempo, pois o código dentro do iFrame parecia limitado ao DOM dentro do iFrame (e não conseguia editar o iFrame), e o código executado fora do iFrame estava preso ao DOM fora do iFrame (e não podia ' (pegue um evento vindo de dentro do iFrame).

A solução veio da descoberta (via assistência de um colega) de que o jQuery pode saber qual DOM usar. Nesse caso, o DOM da janela pai.

Assim, um código como esse faz o que você precisa (quando executado dentro do iFrame):

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Qual seria o código completo para isso? Presumo que o script entra no iframe html?
Andrew Hundt

Este é o código completo e, sim, ele roda dentro do HTML do iFrame. A parte "window.parent.document" especifica que o seletor jQuery deve usar o DOM do documento pai e não o documento em que você está (que está dentro do iFrame).
Garnaph

13
Isso funciona perfeitamente se o documento pai e o documento no iframe forem do mesmo domínio . Se não estiverem (ou, no chrome, se forem os dois arquivos locais ), as políticas de segurança "mesma origem" dos navegadores serão ativadas e impedirão que o conteúdo do iframe modifique o documento pai.
usar o seguinte comando

1
Para quem tenta fazer algo assim funcionar entre domínios, consulte window.postMessage (IE8 +) e saiba que você precisará de scripts personalizados nos documentos host (pai) e de origem (no iframe). O plugin pós-mensagem do jQuery pode ajudar. Como você precisará de scripts no host e na origem, pode ser mais fácil fazer com que o host carregue o conteúdo pelo AJAX usando JSON-P.
usar o seguinte comando

3
Como disparar o evento automaticamente em vez de jQuery("#IDofControlFiringResizeEvent").click(function ()?
Ben

33

solução de uma linha para incorporações: começa com um tamanho mínimo e aumenta para o tamanho do conteúdo. não há necessidade de tags de script.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>


O snippet de código de execução não funciona com o Safari 9.1.1 pode incluir um problema SO?
Elensar

Não é um domínio cruzado. Talvez o servidor precise adicionar alguns cabeçalhos à página emoldurada?
Finesse

Todas as respostas aqui mencionadas scrollHeight/scrollWidthdevem ser um pouco ajustadas para levar em conta as margens do corpo. Os navegadores aplicam margens padrão diferentes de zero para o elemento do corpo dos documentos (e também é aplicável ao conteúdo carregado nos quadros). A solução de trabalho que encontrei é para adicionar o seguinte: parseInt(window.getComputedStyle(this.contentDocument.body).margin.
Stan

24

Se o conteúdo do iframe for do mesmo domínio, isso deve funcionar muito bem. Requer jQuery embora.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

Para redimensionar dinamicamente, você pode fazer o seguinte:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Em seguida, na página que o iframe carrega, adicione isto:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

existem maneiras simples de fazer isso quando a origem é de um domínio diferente?
precisa saber é o seguinte

15

Aqui está uma solução entre navegadores, se você não quiser usar o jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

1
Isso é estranho. Para mim, calcula uma largura muito estranha de iframe. a largura do conteúdo é 750 e calcula-a como 300. Você tem alguma ideia de por quê?
Rob

Eu brinquei com esse código (adicionando opções de altura). Se eu definir a altura do iFrame em 100%, ela a restringirá a cerca de 200px. Se eu definir a altura do iFrame em 600px, ele permanecerá com isso. @RobertJagoda você conseguiu uma solução para isso?
iaindownie

9

Depois de ter tentado tudo na terra, isso realmente funciona para mim.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

ele diz: Uncaught TypeError: $ não é uma função de redimensionamento automático ((index): 200) em HTMLIFrameElement.onload ((index): 204)
Michael Rogers

2
@ Michael Rogers Há um conflito com $ ou você se esquece de incluir o arquivo jQuery.js. Use uma função genérica stackoverflow.com/questions/6109847/… ou substitua $ por jQuery
Adrian P.

8

Estou usando esse código para ajustar automaticamente a altura de todos os iframes (com a classe autoHeight) quando eles são carregados na página. Testado e funciona no IE, FF, Chrome, Safari e Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

2
O que é essa mágica 35 que você está adicionando? Para qual navegador e sistema operacional você o mediu?
H2stein 13/11/2012

Agora eu realmente não sei por que adicionei 35 pixels. Mas certamente posso dizer que o testei no FF, IE (7, 8, 9) e no Chrome e que funcionou bem.
petriq

3
Eu acho que 35 é apenas a espessura barra de rolagem
Sadegh

Eu tive que ajustar um pouco isso para fazer funcionar - chamado setHeight (iframe); directamente (removido o $ (iframe) .load () invólucro em torno dele.
shacker

Os 35 pixels mágicos adicionados devem levar em consideração o preenchimento de iframe. Eu acrescentaria que o iframe não deve conter preenchimento do conteúdo da iframesh, deve cuidar disso.
Filipe Melo

5

Esta é uma solução à prova de sólidos

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

o html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

3

Modifiquei levemente a ótima solução de Garnaph acima. Parecia que sua solução modificou o tamanho do iframe com base no tamanho imediatamente antes do evento. Para minha situação (envio de e-mail por meio de um iframe), era necessário alterar a altura do iframe logo após o envio. Por exemplo, mostre erros de validação ou mensagem de "agradecimento" após o envio.

Acabei de eliminar a função click () aninhada e a coloquei no meu iframe html:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Funcionou para mim, mas não tenho certeza sobre a funcionalidade entre navegadores.


3

Se você pode controlar o conteúdo IFRAME e a janela pai, precisará do iFrame Resizer .

Essa biblioteca permite o redimensionamento automático da altura e largura dos iFrames iguais e de domínio cruzado para ajustar-se ao conteúdo contido. Ele fornece uma variedade de recursos para solucionar os problemas mais comuns do uso de iFrames, incluindo:

  • Redimensionamento de altura e largura do iFrame para o tamanho do conteúdo.
  • Funciona com vários iFrames aninhados.
  • Autenticação de domínio para iFrames entre domínios.
  • Fornece uma variedade de métodos de cálculo de tamanho de página para oferecer suporte a layouts complexos de CSS.
  • Detecta alterações no DOM que podem causar o redimensionamento da página usando MutationObserver.
  • Detecta eventos que podem causar o redimensionamento da página (redimensionamento de janelas, animação e transição de CSS, eventos de mudança de orientação e mouse).
  • Sistema de mensagens simplificado entre o iFrame e a página do host via postMessage.
  • Corrige os links da página no iFrame e suporta links entre o iFrame e a página pai.
  • Fornece métodos personalizados de dimensionamento e rolagem.
  • Expõe a posição dos pais e o tamanho da janela de visualização para o iFrame.
  • Funciona com o ViewerJS para suportar documentos PDF e ODF.
  • Suporte de fallback até o IE8.

2

nem tudo pode funcionar usando os métodos acima.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64


2

Eu descobri outra solução depois de algumas experiências. Inicialmente, tentei o código marcado como 'melhor resposta' para esta pergunta e não funcionou. Meu palpite é que meu iframe no meu programa na época foi gerado dinamicamente. Aqui está o código que usei (funcionou para mim):

Javascript dentro do iframe que está sendo carregado:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

É necessário adicionar 4 ou mais pixels à altura para remover as barras de rolagem (alguns erros / efeitos estranhos dos iframes). A largura é ainda mais estranha, você pode adicionar 18px à largura do corpo. Verifique também se você possui o css para o corpo do iframe (abaixo).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Aqui está o html para o iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Aqui está todo o código dentro do meu iframe:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

Eu fiz testes no chrome e um pouco no firefox (no windows xp). Ainda tenho mais testes para fazer, então, diga-me como isso funciona para você.


obrigado, isso funciona de maneira incrível em navegadores de celular pelo que testei e foi aí que tive problemas com o redimensionamento de iframes!
Mircea Sandu

Que bom que você gostou :-) Eu descobri que o iframe é muito mais eficiente e oferece melhor suporte ao navegador que o Ajax.
www139 13/07/2015

1
OBRIGADO!!! Principalmente, porque você é o único que especificou ONDE colocar o código sem supor que as pessoas saibam. Esta solução simples funcionou perfeitamente para mim (Firefox, Chrome, Edge), para enquadrar conteúdo dinâmico no mesmo domínio no meu site Wordpress. Eu tenho uma seleção de formulário que produzirá conteúdo dinâmico de vários comprimentos. O iFrame se ajusta perfeitamente. Eu tive que ajustar o .clientHeight + 5 + 'px'; e clientWidth + 18 + 'px'; para ter mais pixels. E não sei por que o display: table; no CSS era necessário, então comentei para meus propósitos. Obrigado novamente.
Heres2u 30/01

1

É assim que eu faria (testado no FF / Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Se a Microsoft não se importa com isso, quem deve se importar?
M3nda

1

Aqui estão vários métodos:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

E OUTRA ALTERNATIVA

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

PARA OCULTAR A ROLAGEM COM 2 ALTERNATIVAS mostradas acima

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK COM SEGUNDO CÓDIGO

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

Para ocultar as barras de rolagem do iFrame, o pai é feito "overflow: hidden" para ocultar as barras de rolagem e o iFrame é feito para ir até 150% de largura e altura, o que força as barras de rolagem fora da página e, como o corpo não Para ter barras de rolagem, não se pode esperar que o iframe exceda os limites da página. Isso oculta as barras de rolagem do iFrame com largura total!

fonte: defina a altura automática do iframe


Os exemplos que você deu devem criar conteúdo completo para iframe, não para redimensionar automaticamente a altura do iframe para caber em todo o conteúdo interno. Não responde as perguntas.
Nickornotto #


1

Encontrei este redimensionador para funcionar melhor:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Observe que o objeto de estilo foi removido.


Não funciona para mim no Chrome / Win10 - o conteúdo é cortado parcialmente na parte inferior.
glenneroo 2/03

1

No jQuery, esta é a melhor opção para mim, que realmente me ajuda! Espero que te ajude!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

1

Contexto

Eu mesmo tive que fazer isso no contexto de uma extensão da web. Essa extensão da Web injeta parte da interface do usuário em cada página, e essa interface fica dentro de uma iframe. O conteúdo dentro do iframeé dinâmico, então tive que reajustar a largura e a altura do iframepróprio.

Uso React, mas o conceito se aplica a todas as bibliotecas.

Minha solução (isso pressupõe que você controla a página e o iframe)

No interior iframe, mudei de bodyestilo para ter dimensões realmente grandes. Isso permitirá que os elementos internos sejam dispostos usando todo o espaço necessário. Fazer widthe height100% não funcionou para mim (acho que porque o iframe tem um padrão width = 300pxe height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Injetei toda a interface do iframe dentro de uma div e dei alguns estilos

#ui-root {
  display: 'inline-block';     
}

Depois de renderizar meu aplicativo dentro disso #ui-root(em React , faço isso dentro componentDidMount), eu calculo as dimensões dessa div e sincronizo-as com a página pai usando window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

No quadro pai, faço algo assim:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Ótima solução! Obrigado!
redelschaap


0

Sei que o post é antigo, mas acredito que essa é outra maneira de fazê-lo. Acabei de implementar no meu código. Funciona perfeitamente no carregamento da página e no redimensionamento da página:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

0

Javascript a ser colocado no cabeçalho:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Aqui está o código html iframe:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Folha de estilo CSS

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

0

Para o atributo da diretiva angularjs:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Observe a porcentagem, eu a inseri para que você possa combater o dimensionamento geralmente feito para iframe, texto, anúncios etc., basta colocar 0 se nenhum dimensionamento for implementado


0

Foi assim que fiz isso onload ou quando as coisas mudam.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

0

Claramente, existem muitos cenários, no entanto, eu tinha o mesmo domínio para o documento e o iframe e pude prendê-lo até o final do meu conteúdo do iframe:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

Isso 'localiza' o contêiner pai e define o comprimento adicionando um fator de correção de 50 pixels para remover a barra de rolagem.

Não há nada para 'observar' a alteração da altura do documento; isso não era necessário para o meu caso de uso. Na minha resposta, trago um meio de referenciar o contêiner pai sem usar IDs inseridos no conteúdo pai / iframe.


0

Se você puder viver com uma proporção fixa e desejar um iframe responsivo , esse código será útil para você. São apenas regras CSS.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

O iframe deve ter uma div como contêiner.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

O código fonte é baseado neste site e Ben Marshall tem uma boa explicação.


-1

Simplicidade:

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

-1

Se o conteúdo for apenas um html muito simples, a maneira mais simples é remover o iframe com javascript

Código HTML:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Código Javascript:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

1
Isso altera o contorno do documento pai. Se você deseja ter outro documento como uma figura com uma legenda, isso não mantém o esboço do documento como sucinto. Casos de uso diferentes, mas eu queria mover um trecho de código para um iframe devido a motivos delineados.
Henry's Cat

-2
<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

Isso não é CSS, é JS.
clifgriffin 14/02
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.