Iframe dynamic mobile

Question

Iframe dynamic mobile

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I need to generate a iframe dynamic when I click a button on a div for a mobile application only when I try to load this same iframe using the Onload method in the Body it does not load automatically and only when I refresh the page (F5).

Here is part of my code:

<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>

html jquery html5 css mobile

asked by anonymous 31.08.2015 / 15:19

3 answers

Problem with rest controller in Spring Browser with Answer Ah not for Ionic app

score 0 · Answer 1

<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>

score 0 · Answer 2

<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);
}

score 0 · Answer 3

Renan, to access div.map you need to make sure that it is already loaded, you can use one of the following options:

jQuery:

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

JavaScript

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

or dot, so that the iframe has a size proportional to the screen with a decrease in px , you can use 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>

Tosolveyourproblemimmediately,removebody.onloadanduse$(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><divclass="map"></div>