Writing jQuery to change dimensions of dynamic iframe on click

Question

I am trying to a small script that will change the dimensions of an iframe when the iframe clicked. Here is the code for the iframe:

$("#myKAframe").click(function () { 
    $('#myKAframe').css({ "height": "100%", "width": "100%" }); 
});

 <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
 <iframe id="myKAframe" src="ka.html" title="KA"
        style=" padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;">
 </iframe>

My issue is that, first of all, the code isn't working. And second, I don't know how to make the jquery such that when the iframe is clicked again, it goes back to the small dimensions. I'm pretty new to jQuery so any help I could get would be greatly appreciated.

You'll need to either put your script inside a `document.ready` callback, put it _after_ the markup it references, or use `event delegation`. All are well-trodden topics. Then, think though how you'd track state with a variable, cookie, local storage, or whatever. That part of your question is too broad. — isherwood, Dec 14 '20 at 17:46
`toggleClass()` is useful for the second part of your question. — Liftoff, Dec 14 '20 at 17:46

score 1 · Answer 1 · answered Dec 14 '20 at 17:44

The first issue is that <iframe></iframe> itself isn't a clickable element. A click "on" an iframe is actually a click on content inside the iframe.

It is possible to detect a click inside an iframe. Take a look at other discussions of how to detect a click inside an iframe here on SO.

score 0 · Accepted Answer · answered Dec 14 '20 at 18:05

as written here, you can't add click listener to an iframe, but you can add listener to the body of the iframe (taken from here)
and for creating the toggle system you can simply create a boolean that change is state every click

var big = false;
$(function () {  
    $("#myKAframe").on("load",function(){


document.getElementById("myKAframe").contentWindow.document.body.onclick = 
function() {
  if(big) $('#myKAframe').css({ "height": "auto", "width": "auto" }); 
  else $('#myKAframe').css({ "height": "100%", "width": "100%" }); 
  big = !big;
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</script>
<iframe id="myKAframe" src="https://www.example.com/" title="hello"
    style=" padding: 0px; margin: 10px 20px; position: fixed; bottom: 0px; overflow: visible; opacity: 1; border: 0px; z-index: 999998; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-property: opacity, top, bottom; right: 0px;">
</iframe>

Thank you so much! That makes a lot of sense. But when I try implementing the code, I keep getting a "$ reference undefined", I don't think I know enough jquery to see what the problem is, but is there something I'm missing with regards to the placement of $ in the code snippet you provided. — RandomVector12, Dec 14 '20 at 18:29
Yup. Actually It was just some files called out of scope. It works now! Thanks again! — RandomVector12, Dec 14 '20 at 19:05

Writing jQuery to change dimensions of dynamic iframe on click

2 Answers2