Do not rotate iframe until clicking

Asked

Viewed 808 times

1

Hello. I have the Pagina1.php that has an iframe that sits in 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 I debug Pagina1.php even without clicking the button I see that it goes through the code of the iframe page.

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

That’s possible?

php html ajax

2 answers

2

The element display:none just hides the user view element, keeping it in the page load. You must remove the html iframe and load it through an onclick event via javascript when you click the button that 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>
<a href="#" onclick="exibirFrame()">Exibir Frame</a>
<div id="iframeExibe">a</div>

1

In a very simple way, without needing the 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>

Browser other questions tagged php html ajax

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