3

Tenho um iframe em que o src aponta para um domínio externo

Após o conteúdo ser carregado, uma parte fica oculta porque o iframe não se adapta ao conteúdo.

Uma vez que o iframe possui um src externo, não consigo manipular o seu conteúdo de forma a obter a altura do correta.

Como alterar a altura do iframe?

1

2 Respostas 2

0

O problema foi resolvido utilizando "postMessage", lembrando que o problema surgiu porque tentei aceder o conteúdo de um iframe em que o "src" não apontava para o mesmo domínio.

Basicamente o que o código abaixo faz é enviar uma mensagem para o iframe após ser carregado (onload) utilizando o "postMessage".

Dentro do iframe existe um evento que aguarda a mensagem. Quando a mensagem é recebida o iframe responde (também através do "postMessage") com a altura do seu conteúdo.

No elemento pai onde o iframe foi inserido, existe outro evento que aguarda a mensagem com a altura do conteúdo.

Script da página onde o iframe foi inserido:

//Gerando o iframe
var iframe = document.createElement('iframe');
as_root.appendChild(iframe);
iframe.id = "as-root-iframe";
iframe.style.width = '100%';
iframe.style.border = 'none';
iframe.style.scrolling = 'no';
iframe.style.overflow = 'hidden';
iframe.onload = function() {
    cpframe = document.getElementById('as-root-iframe').contentWindow;
    cpframe.postMessage('iframe-ok','*');
}
iframe.src = "http://dominio.como/embed/DYaok87sd";

//evento que aguarda a mensagem com a altura do conteúdo e posteriormente altera a altura do iframe
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
    document.getElementById('as-root-iframe').style.height = e.data+'px';
},false);

Script dentro do iframe:

//evento que aguarda mensagem do elemento "pai" solicitando a altura do conteúdo
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
var h = document.getElementById('as_content').offsetHeight+50;
    window.parent.postMessage(h,"*");
},false);

Foi necessário fazer tudo com Javascript puro porque não foi possível utilizar frameworks como Jquery.

0

Veja este exemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <meta charset="utf-8">
  <title>iFrame message passing test</title>
  <meta name="description" content="iFrame message passing test">
  <meta name="viewport" content="width=device-width">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script type="text/javascript">
    //MDN PolyFil for IE8 (This is not needed if you use the jQuery version)
    if (!Array.prototype.forEach) {
      Array.prototype.forEach = function(fun /*, thisArg */ ) {
        "use strict";
        if (this === void 0 || this === null || typeof fun !== "function") throw new TypeError();

        var
          t = Object(this),
          len = t.length >>> 0,
          thisArg = arguments.length >= 2 ? arguments[1] : void 0;

        for (var i = 0; i < len; i++)
          if (i in t)
            fun.call(thisArg, t[i], i, t);
      };
    }
  </script>
  <style type="text/css"></style>
</head>

<body>
  <h2>Automagically resizing iFrame</h2>
  <p>Resize window or click one of the links in the iFrame to watch it resize.</p>
  <div style="margin:20px;">
    <iframe src="http://davidjbradshaw.com/iframe-resizer/example/frame.content.html" width="100%" scrolling="no" id="iFrameResizer0" style="overflow: hidden; height: 334px;"></iframe>
  </div>
  <p id="callback"><b>Frame ID:</b> iFrameResizer0 <b>Height:</b> 334 <b>Width:</b> 1287 <b>Event type:</b> init</p>
  <div style="margin: 8px 0;font-size:13px;">
    For details on how this works, see
    <a href="http://davidjbradshaw.github.io/iframe-resizer/">http://davidjbradshaw.github.io/iframe-resizer/</a>.
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="../js/iframeResizer.min.js"></script>
  <script type="text/javascript">
    iFrameResize({
      log: true, // Enable console logging
      enablePublicMethods: true, // Enable methods within iframe hosted page
      resizedCallback: function(messageData) { // Callback fn when resize is received
        $('p#callback').html(
          '<b>Frame ID:</b> ' + messageData.iframe.id +
          ' <b>Height:</b> ' + messageData.height +
          ' <b>Width:</b> ' + messageData.width +
          ' <b>Event type:</b> ' + messageData.type
        );
      },
      messageCallback: function(messageData) { // Callback fn when message is received
        $('p#callback').html(
          '<b>Frame ID:</b> ' + messageData.iframe.id +
          ' <b>Message:</b> ' + messageData.message
        );
        alert(messageData.message);
      },
      closedCallback: function(id) { // Callback fn when iFrame is closed
        $('p#callback').html(
          '<b>IFrame (</b>' + id +
          '<b>) removed from page.</b>'
        );
      }
    });
  </script>


</body>

</html>

<!-- begin snippet: js hide: false -->


Fonte: https://github.com/davidjbradshaw/iframe-resizer

2
  • Já tentei, mas como é um iframe que está em outro domínio, não tenho permissões para aceder ao "contentWindow" do iframe. 14/01/2015 às 9:56
  • Veja agora. Eu atualizei.
    – Lollipop
    14/01/2015 às 14:37

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 .