编写 jQuery 以在单击时更改动态 iframe 的尺寸 [关闭]

Posted 2023-05-08

【中文标题】编写 jQuery 以在单击时更改动态 iframe 的尺寸 [关闭]

【英文标题】：Writing jQuery to change dimensions of dynamic iframe on click [closed]

【发布时间】：2021-03-25 08:51:43

【问题描述】：

我正在尝试一个小脚本，当点击 iframe 时它会改变 iframe 的尺寸。这是 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>



       

我的问题是，首先，代码不起作用。其次，我不知道如何制作 jquery，以便当再次单击 iframe 时，它​​会返回到小尺寸。我对 jQuery 很陌生，所以我能得到任何帮助将不胜感激。

【问题讨论】：

您需要将脚本放在document.ready 回调中，将其放在它引用的标记之后，或者使用event delegation。都是老生常谈的话题。然后，考虑一下如何使用变量、cookie、本地存储等来跟踪状态。你的这部分问题太宽泛了。

toggleClass() 对您问题的第二部分很有用。

【参考方案1】：

第一个问题是<iframe></iframe> 本身不是可点击元素。 “点击”iframe 实际上是点击iframe内部的内容。

可以检测到iframe 内的点击。在 SO 上查看其他 discussions of how to detect a click inside an iframe。

【参考方案2】：

如here 所写，您不能将点击侦听器添加到 iframe，但您可以将侦听器添加到 iframe 的主体（取自 here） 为了创建切换系统，您可以简单地创建一个布尔值，每次点击都会改变状态

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>

【讨论】：

非常感谢！这很有意义。但是当我尝试实现代码时，我不断收到“$ 引用未定义”，我认为我对 jquery 了解的不够多，无法查看问题所在，但是关于 $ 的位置，我是否遗漏了什么您提供的代码 sn-p。

你添加了 jquery 吗？

是的。实际上这只是一些超出范围的文件。现在可以了！再次感谢！

@ConstantFuture 所以请接受其中一个答案