Do not run iframe while not clicking

Question

Do not run iframe while not clicking

Navigation

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

0

Hello. I have Pagina1.php which has an iframe that sits on an invisible div (display: none), which shows the iframe only when I click on a button with the ajax function to show the invisible div that is the iframe.

The problem is that when debugging Pagina1.php even without having clicked the button I see that it goes through the iframe page code.

I would like to just run the iframe when I click the button to make it visible.

Is this possible?

php html ajax

asked by anonymous 25.08.2015 / 21:04

2 answers

Failed to copy an entire directory and its files problems with Handlebars JS

score 1 · Answer 1

The display:none element only hides the element from the user view, keeping it at page load. You should remove the iframe from the html and load it through an onclick event via javascript when you click the button it displays.

function exibirFrame(){
  $("#iframeExibe").html('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235231.64761594174!2d-47.03026079999999!3d-22.895124900000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94c8c8f6a2552649%3A0x7475001c58043536!2sCampinas%2C+SP!5e0!3m2!1spt-BR!2sbr!4v1440536173224"width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>');
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ahref="#" onclick="exibirFrame()">Exibir Frame</a>
<div id="iframeExibe">a</div>

score 0 · Answer 2

In a very simple way, without needing jquery , you can do this:

function viewIframe(idIframe, idUrl) {
        var obj =  document.getElementById(idIframe);
        var oLink =  document.getElementById(idUrl);
          if (obj.style.display == 'none') {
            obj.style.display = 'block';
            oLink.innerHTML='Esconder Iframe';
          } else { 
            obj.style.display = 'none';
            oLink.innerHTML='Exibir Iframe';
          }
}

   <a href="javascript:viewIframe('elemento', 'url')" id="url">Exibir Iframe</a>
    <div id="elemento" style="display:none">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/QcIy9NiNbmo"frameborder="0" allowfullscreen></iframe>
    </div>

But if you want to use jquery , just do this:

function viewIframe(id) {
    if ( $('#' + id).is(':hidden')) {
        $('#' + id).show();
        $('.url').text('Esconder Iframe');
     } else {
        $('#' + id).hide();
        $('.url').text('Exibir Iframe');
     }
  }

   <a href="javascript:viewIframe('elemento')" class="url">Exibir Iframe</a>
    <div id="elemento" style="display:none">
   <iframe width="560" height="315" src="https://www.youtube.com/embed/QcIy9NiNbmo"frameborder="0" allowfullscreen></iframe>
    </div>
   <script src="//code.jquery.com/jquery-latest.min.js"></script>