1

Preciso gerar um iframe dinâmico ao clicar em um botão em uma div para uma aplicação mobile só que quando tento carregar este mesmo iframe usando o método Onload no Body ele não carrega automático e apenas quando eu atualizo a página (F5).

Segue parte do meu código:

<script>
    function Map()
    {       
        var retorno;
        var largura;
        var altura;

        largura = ($(document).width()) - 20;
        altura = ($(document).height()) -200;

        retorno = '<iframe src="http://iframeasercarregado" frameborder="0" scrolling="auto" width="' + largura + '" height="' + altura + '"></iframe>';
        $('.map').html(retorno);
    }
</script> 
<html>
<body onLoad="Map();">
<div class="map"></div>
</body>
</html>
6
  • Já ouviu falar em @media queries do CSS ? Commented 31/08/2015 às 14:08
  • Nunca ouvi falar não... Commented 31/08/2015 às 14:27
  • Então, dá uma pesquisada, que vai te ajudar bastante para versões mobile. Commented 31/08/2015 às 14:33
  • Dá uma olhada nesta resposta, veja se te ajuda: pt.stackoverflow.com/questions/82543/… Commented 31/08/2015 às 14:35
  • Você quer deixar o iframe sempre responsivo ou a questão é o carregamento do iframe? Commented 31/08/2015 às 17:59

3 Respostas 3

1

Renan, para acessar a div.map você precisa ter certeza que a mesma já se encontra carregada, para isto você pode usar uma das seguinte opções:

jQuery:

$(document).ready(function () {
  //seu codigo aqui.
});

JavaScript

document.addEventListener("readystatechange", function () {
  if (document.readyState == "interactive") {
    //seu codigo aqui.
  }
});

ou ponto, para que o iframe tenha um tamanho proporcional a tela com um decrecimo em px, você pode usar o calc()

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#meuIframe {
  width: calc(100% - 20px);
  height: calc(100% - 100px);
  box-sizing: border-box;
  margin: 10px;
  padding: 0px;
  border: 0px none transparent;
}
<iframe id="meuIframe" src="http://iframeasercarregado" ></iframe>

para resolver o seu problema de forma imediata, remova o body.onload e use o $(handler).

function Map()
{       
  var retorno;
  var largura;
  var altura;

  largura = ($(document).width()) - 20;
  altura = ($(document).height()) -100;

  retorno = '<iframe src="http://iframeasercarregado" frameborder="0" scrolling="auto" width="' + largura + '" height="' + altura + '"></iframe>';
  $('.map').html(retorno);
}

$(function () {
  Map();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map"></div>

0
<script>
    function Map()
    {       
        var retorno;
        var largura;
        var altura;

        largura = ($(document).width()) - 20;
        altura = ($(document).height()) -200;

        retorno = '<iframe src="http://iframeasercarregado" frameborder="0" scrolling="auto" width="' + largura + '" height="' + altura + '"></iframe>';
        $('.map').html(retorno);
    }
</script> 
<html>
    <body>
        <div class="map"></div>
    </body>
    <script>Map();</script>
</html>
0
<script>

window.onload = funtion(){
    map();
}

function Map()
{       
    var retorno;
    var largura;
    var altura;

    largura = ($(document).width()) - 20;
    altura = ($(document).height()) -200;

    retorno = '<iframe src="http://iframeasercarregado" frameborder="0" scrolling="auto" width="' + largura + '" height="' + altura + '"></iframe>';
    $('.map').html(retorno);
}

1
  • Bem vindo ao SOpt, Vitor. Edite sua reposta e dê uma explicação de como/porque o código que vc postou, responde a pergunta. Isso vai ajudar o AP (autor da pergunta) e outros que eventualmente venham a ter esse mesmo problema no futuro.
    – emanuelsn
    Commented 3/09/2015 às 14:28

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 .