skip to Main Content

I have different iframe, but it slows down. I want the iframe to only load, when a button is clicked. And then hide/show iframe with toggle event.
Example of the code:

<script>
    $(document).ready(function(){
        $("#button2").click(function(){
            $("#iframecon").toggle();
        });
    });
</script>
<input type="checkbox" id="button2" onClick='document.getElementById("iframe2").src="/page1.php";'>
<div id="iframecon">
    <iframe id="iframe2" width="100%" height="100%"></iframe>
</div>

How can I do it? Thanks

2

Answers


  1. You can try something like this:

        <script>
        $(document).ready(function(){
            $("#button2").click(function(){
                var iframe = $("#iframe2");
                if (iframe.attr("src") === "") {
                    iframe.attr("src", "/page1.php");
                }
                $("#iframecon").toggle();
            });
        });
    </script>
    <input type="checkbox" id="button2">
    <div id="iframecon" style="display: none;">
        <iframe id="iframe2" src="" width="100%" height="100%"></iframe>
    </div>
    

    Check the src of the iframe

    Login or Signup to reply.
  2. You probably want the change event not the click; jQuery will handle it as "one" event trigger but standard JavaScript will add two event listeners so we should just use one (the change)

    Note this assumes a hard coded URL in both these BUT I also added some "html" to inject in just for this demo.

    Examples:

    jQuery example:

    Here I hide it initially, then toggle after I set the src value.

    $(function() {
      const htmlString = "<h1>content</h1><p>hi there!";
      const $frm = $("#iframe2");
      $frm.hide();
      $("#button2").on('click, change', function(event) {
        const srcU = "someurlhere";
        if ($frm.attr("src") !== srcU) {
          // just for this demo
          $frm.attr("src", "data:text/html;charset=utf-8," + escape(htmlString))
          // using an actual URL string:
          // $frm.attr("src", srcU);
        }
        $frm.toggle();
      });
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <input type="checkbox" id="button2">
    <div id="iframecon">
      <iframe id="iframe2" width="100%" height="100%"></iframe>
    </div>

    Generic JavaScript:

    Here I use a class and set that in the HTML so it is initially hidden with that CSS; then I toggle that class if the checkbox is checked to remove it or add it if NOT checked so the hide follows the X/checked shows, unchecked hides.

    Alternative to this one would be to set a dataset value on the iframe then put CSS in to reflect the show/hide from that value such as #iframe2{display:none;} #iframe2[data-showme="true"]{display:block;} so any value other than "true" or not yet set hides it (order dependency of the CSS matters)

    const toggleCheck = document.querySelector("#button2");
    // just to show the content IS added; same as src with a URL but I just inject some
    const htmlString = "<h1>content</h1><p>hi there!";
    
    function handleEvent(event) {
      const ifrm = document.querySelector("#iframe2");
      const srcU = "someurlhere";
      const isSet = ifrm.src === srcU;
      if (!isSet) {
        // just for this demo
        ifrm.src = "data:text/html;charset=utf-8," + escape(htmlString);
        // ifrm.src = srcU;
      }
      ifrm.classList.toggle('hidden', !event.target.checked);
    }
    toggleCheck.addEventListener('change', handleEvent, false);
    .hidden {
      display: none;
    }
    <input type="checkbox" id="button2">
    <div id="iframecon">
      <iframe id="iframe2" width="100%" height="100%" class="hidden"></iframe>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search