Mobile dynamic iframe

Question

Mobile dynamic iframe

Asked 8 years, 10 months ago

Viewed 664 times

1

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

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

Ever heard of @media queries of CSS ?

– Ivan Ferrer

2015/08/31 at 14:08
Never heard of no...

– Renan Maldonado Marques

2015/08/31 at 14:27
So, do a search, which will help you a lot for mobile versions.

– Ivan Ferrer

2015/08/31 at 14:33
Take a look at this answer, see if it helps you: http://answall.com/questions/82543/n%C3%A3o-rodar-iframe-enquanto-n%C3%A3o-clique/82582#82582

– Ivan Ferrer

2015/08/31 at 14:35
You want to always make iframe responsive or the issue is iframe loading?

– Rodrigo Santos

2015/08/31 at 17:59
I want to make Iframe always responsive and carry it Rodrigo

– Renan Maldonado Marques

2015/09/01 at 15:02

Show 1 more comment

3 answers

Browser other questions tagged jquery html css html5 mobile

You are not signed in. Login or sign up in order to post.

by Tobias Mesquita • **22,900** points · Answer 1 · 2016-02-25T16:51:45+00:00

Renan, to access the div.map you need to make sure that it is already loaded, for this 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 point, so that the iframe has a screen proportional size with a decrease in px, you can use the 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>

to resolve your problem immediately, remove the body.onload and use the $(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>

by Dirty Old Man • **1,064** points · Answer 2 · 2015-09-03T12:12:13+00:00

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

by vitor caio campos • 1 point · Answer 3 · 2015-09-03T14:12:42+00:00

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